modern-screenshot

Quickly generate image from DOM node using HTML5 canvas and SVG

Fork from html-to-image

English | 简体中文

## 📦 Install ```sh npm i modern-screenshot ``` ## 🦄 Usage ```ts import { domToPng } from 'modern-screenshot' domToPng(document.querySelector('#app')).then((dataUrl) => { const link = document.createElement('a') link.download = 'screenshot.png' link.href = dataUrl link.click() }) ```

CDN

```html ```

Browser Console

> ⚠️ Partial embedding will fail due to CORS ```js const script = document.createElement('script') script.src = 'https://unpkg.com/modern-screenshot/dist/index.js' 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 > `method(node: Node, options?: Options)` DOM to dataURL - [domToPng](src/converts/dom-to-png.ts) - [domToSvg](src/converts/dom-to-svg.ts) - [domToJpeg](src/converts/dom-to-jpeg.ts) - [domToWebp](src/converts/dom-to-webp.ts) - [domToDataUrl](src/converts/dom-to-data-url.ts) DOM to data - [domToBlob](src/converts/dom-to-blob.ts) - [domToPixel](src/converts/dom-to-pixel.ts) DOM to HTMLElement - [domToForeignObjectSvg](src/converts/dom-to-foreign-object-svg.ts) - [domToImage](src/converts/dom-to-image.ts) - [domToCanvas](src/converts/dom-to-canvas.ts) ## Options See the [options.ts](src/options.ts) ## Singleton context and web worker Quick screenshots per second by reusing context and web worker ```ts import { createContext, destroyContext, domToPng } from 'modern-screenshot' // use vite import workerUrl from 'modern-screenshot/worker?url' async function screenshotsPerSecond() { const context = await createContext(document.querySelector('#app'), { workerUrl, workerNumber: 1, }) for (let i = 0; i < 10; i++) { domToPng(context).then((dataUrl) => { const link = document.createElement('a') link.download = `screenshot-${i + 1}.png` link.href = dataUrl link.click() if (i + 1 === 10) { destroyContext(context) } }) await new Promise(resolve => setTimeout(resolve, 1000)) } } screenshotsPerSecond() ``` See the [context.ts](src/context.ts) ## TODO - [ ] unable to clone [css counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) `content: counter(step);`

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

modern-screenshot	442,897	1,571	184 kB	57	15日前	MIT