Examples

How to convert HTML to a base64 image with Cypress and JavaScript

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/.

Get the base64 encoded image of some HTML and print to screen

// cypress/e2e/screenshot.cy.js
describe('screenshot', () => {
  it('reads the screenshot back as base64', () => {
    cy.visit('https://www.htmltoimage.com/demo');
    cy.screenshot('base64-source', { capture: 'viewport' });
    cy.readFile('cypress/screenshots/screenshot.cy.js/base64-source.png', 'base64').then((image) => {
      cy.log(image.slice(0, 40) + '…');
    });
  });
});

Find out how to generate a PNG from HTML with JavaScript and Cypress.

That was 10 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.