@tunnel/modern-screenshot

modern-screenshot

Quickly generate image from DOM node using HTML5 canvas and SVG

Fork from html-to-image

English | 简体中文

📦 Install

npm i modern-screenshot

🦄 Usage

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

<script src="https://unpkg.com/modern-screenshot"></script>
<script>
  modernScreenshot.domToPng(document.querySelector('body')).then(dataUrl => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = dataUrl
    link.click()
  })
</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

method(node: Node, options?: Options)

DOM to dataURL

• domToPng
• domToSvg
• domToJpeg
• domToWebp
• domToDataUrl

DOM to data

• domToBlob
• domToPixel

DOM to HTMLElement

• domToForeignObjectSvg
• domToImage
• domToCanvas

Options

See the options.ts

Singleton context and web worker

Quick screenshots per second by reusing context and web worker

// use vite
import { createContext, destroyContext, domToPng } from 'modern-screenshot';
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

TODO

• [ ] unable to clone css counters

  content: counter(step);