Examples

Screenshot of a particular area with JavaScript and Cypress

Install Cypress

npm install cypress

Cypress is an end-to-end testing framework, so screenshots are taken from inside a test. Save the example as cypress/e2e/screenshot.cy.js and run it with npx cypress run — screenshots land in cypress/screenshots/.

Take a screenshot of the clip and save to file

// cypress/e2e/screenshot.cy.js
describe('screenshot', () => {
  it('captures a clipped area', () => {
    cy.visit('https://www.htmltoimage.com/demo');
    cy.screenshot('clip', { clip: { x: 0, y: 0, width: 480, height: 240 } });
  });
});

Find out how to take a full-page screenshot with JavaScript and Cypress.

That was 7 lines of code — plus a browser to run in production

Keeping headless browsers fed, patched and scaled is a job in itself. We built Urlbox so the same screenshot is one API call: 

curl "https://api.urlbox.com/v1/YOUR_API_KEY/png?url=https://example.com"

Try the Urlbox screenshot API — free trial, no browser babysitting.