modern-screenshot

Generates an image from a DOM node using HTML5 canvas and SVG

📦 Install

npm i modern-screenshot

🦄 Usage

Basic

import { domToPng } from 'modern-screenshot'

domToPng(document.querySelector('#app')).then(dataURL => {
  open().document.write(`<img src="${ dataURL }" />`)
})

CDN

<script src="https://unpkg.com/modern-screenshot"></script>
<script>
  modernScreenshot.domToPng(document.querySelector('body')).then(dataURL => {
    open().document.write(`<img src="${ dataURL }" />`)
  })
</script>

Browser console

⚠️ Partial embedding will fail due to CORS

const script = document.createElement('script')
script.src = "https://unpkg.com/modern-screenshot"
document.getElementsByTagName('head')[0].appendChild(script)

script.onload = () => {
  modernScreenshot
    .domToImage(document.querySelector('body'), {
      debug: true,
      progress: (current, total) => {
        console.log(`${ current }/${ total }`)
      }
    })
    .then(img => {
      const width = 600
      const height = img.height * (width / img.width)
      console.log('%c ', [
        `padding: 0 ${ width / 2 }px;`,
        `line-height: ${ height }px;`,
        `background-image: url('${ img.src }');`,
        `background-size: 100% 100%;`,
      ].join(''))
    })
}

Methods

Such as domToPng(node, options)

DOM to dataURL

DOM to data

DOM to HTMLElement

Options

the type definition of the options

Known problems

unable to clone closed shadowDom

input::placeholder { color: red; }
unable to clone css counters

content: counter(step);
unable to clone -webkit-scrollbar

body::-webkit-scrollbar-thumb { background-color: red; }

Similar packages

name	description
dom-vcr	Generates an video or GIF from a DOM node using HTML5 canvas and SVG