{"_id":"@egoist/dom-screenshot","name":"@egoist/dom-screenshot","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@egoist/dom-screenshot","type":"module","version":"1.0.3","packageManager":"pnpm@8.7.6","publishConfig":{"access":"public"},"description":"Quickly generate image from DOM node using HTML5 canvas and SVG","author":{"name":"wxm"},"license":"MIT","homepage":"https://github.com/egoist/dom-screenshot","repository":{"type":"git","url":"git+https://github.com/egoist/dom-screenshot.git"},"bugs":{"url":"https://github.com/egoist/dom-screenshot/issues"},"keywords":["dom","image","raster","render","html","canvas","svg","screenshot","modern"],"sideEffects":false,"exports":{".":{"types":"./types/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"},"./worker":{"types":"./types/worker.d.ts","require":"./dist/worker.js","import":"./dist/worker.js"},"./*":"./*"},"main":"dist/index.mjs","module":"dist/index.mjs","types":"types/index.d.ts","browser":"dist/index.js","typesVersions":{"*":{"*":["./types/*","./types/index.d.ts"]}},"scripts":{"dev":"vite","lint":"eslint src","lint:fix":"eslint src --fix","test":"vitest --no-threads --no-isolate","coverage":"vitest run --coverage","build:worker":"vite build --config vite.worker.config.ts","build":"vite build && pnpm build:worker && tsc --project tsconfig.build.json","version":"conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md","release":"bumpp package.json --commit \"release: v%s\" --push --all --tag"},"devDependencies":{"@qq15725/eslint-config":"^1.1.0","@types/glob":"^8.0.1","@types/jest-image-snapshot":"^6.1.0","@vitest/ui":"^0.28.5","bumpp":"^8.2.1","conventional-changelog-cli":"^2.2.2","eslint":"^8.34.0","glob":"^8.1.0","happy-dom":"^8.6.0","jest-image-snapshot":"^6.1.0","puppeteer-core":"^21.6.1","typescript":"^4.9.5","vite":"^4.1.3","vitest":"^0.28.5"},"gitHead":"8e05f6cd5ea72f9d21103ca5712640d0386cc202","_id":"@egoist/dom-screenshot@1.0.3","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-66YBVXo2JBbAmZmI3sEgi5KvHsHY9eo//91b6mL9PVEawkJdCQXOmLvwwngxBw1w9yXKiLicQ7q/ao4hDSaZfg==","shasum":"6cfba8a718dd4564960e16f70995f67dcc6becb1","tarball":"https://registry.npmjs.org/@egoist/dom-screenshot/-/dom-screenshot-1.0.3.tgz","fileCount":47,"unpackedSize":205806,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNw1leeNb/wCYWGn+m1ICH5vkpwN/wBh82tEmKbYz85gIhAP4ObrS1tOxAreleTST6ibf5Mw2HgRnbwmdqB9Eh5U32"}]},"_npmUser":{"name":"egoist","email":"0x142857@gmail.com"},"directories":{},"maintainers":[{"name":"egoist","email":"0x142857@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dom-screenshot_1.0.3_1703768844517_0.3280135325514002"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-28T13:07:24.387Z","1.0.3":"2023-12-28T13:07:24.726Z","modified":"2023-12-28T13:07:25.039Z"},"maintainers":[{"name":"egoist","email":"0x142857@gmail.com"}],"description":"Quickly generate image from DOM node using HTML5 canvas and SVG","homepage":"https://github.com/egoist/dom-screenshot","keywords":["dom","image","raster","render","html","canvas","svg","screenshot","modern"],"repository":{"type":"git","url":"git+https://github.com/egoist/dom-screenshot.git"},"author":{"name":"wxm"},"bugs":{"url":"https://github.com/egoist/dom-screenshot/issues"},"license":"MIT","readme":"<h1 align=\"center\">dom-screenshot</h1>\n\n<p align=\"center\">\n  <a href=\"https://unpkg.com/@egoist/dom-screenshot\">\n    <img src=\"https://img.shields.io/bundlephobia/minzip/@egoist/dom-screenshot\" alt=\"Minzip\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/@egoist/dom-screenshot\">\n    <img src=\"https://img.shields.io/npm/v/@egoist/dom-screenshot.svg\" alt=\"Version\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/@egoist/dom-screenshot\">\n    <img src=\"https://img.shields.io/npm/dm/@egoist/dom-screenshot\" alt=\"Downloads\">\n  </a>\n  <a href=\"https://github.com/egoist/dom-screenshot/issues\">\n    <img src=\"https://img.shields.io/github/issues/egoist/dom-screenshot\" alt=\"Issues\">\n  </a>\n  <a href=\"https://github.com/egoist/dom-screenshot/blob/master/LICENSE\">\n    <img src=\"https://img.shields.io/npm/l/dom-screenshot.svg\" alt=\"License\">\n  </a>\n</p>\n\n<p align=\"center\">Quickly generate image from DOM node using HTML5 canvas and SVG</p>\n\n<p align=\"center\">Fork from <a href=\"https://github.com/bubkoo/html-to-image\">html-to-image</a></p>\n\n## 📦 Install\n\n```sh\nnpm i @egoist/dom-screenshot\n```\n\n## 🦄 Usage\n\n```ts\nimport { domToPng } from '@egoist/dom-screenshot'\n\ndomToPng(document.querySelector('#app')).then((dataUrl) => {\n  const link = document.createElement('a')\n  link.download = 'screenshot.png'\n  link.href = dataUrl\n  link.click()\n})\n```\n\n<details>\n<summary>CDN</summary><br>\n\n```html\n<script src=\"https://unpkg.com/@egoist/dom-screenshot\"></script>\n<script>\n  domScreenshot.domToPng(document.querySelector('body')).then((dataUrl) => {\n    const link = document.createElement('a')\n    link.download = 'screenshot.png'\n    link.href = dataUrl\n    link.click()\n  })\n</script>\n```\n\n<br></details>\n\n<details>\n<summary>Browser Console</summary><br>\n\n> ⚠️ Partial embedding will fail due to CORS\n\n```js\nconst script = document.createElement('script')\nscript.src = 'https://unpkg.com/@egoist/dom-screenshot'\ndocument.getElementsByTagName('head')[0].appendChild(script)\n\nscript.onload = () => {\n  domScreenshot\n    .domToImage(document.querySelector('body'), {\n      debug: true,\n      progress: (current, total) => {\n        console.log(`${current}/${total}`)\n      },\n    })\n    .then((img) => {\n      const width = 600\n      const height = img.height * (width / img.width)\n      console.log(\n        '%c ',\n        [\n          `padding: 0 ${width / 2}px;`,\n          `line-height: ${height}px;`,\n          `background-image: url('${img.src}');`,\n          `background-size: 100% 100%;`,\n        ].join('')\n      )\n    })\n}\n```\n\n<br></details>\n\n## Methods\n\n> `method(node: Node, options?: Options)`\n\nDOM to dataURL\n\n- [domToPng](src/converts/dom-to-png.ts)\n- [domToSvg](src/converts/dom-to-svg.ts)\n- [domToJpeg](src/converts/dom-to-jpeg.ts)\n- [domToWebp](src/converts/dom-to-webp.ts)\n- [domToDataUrl](src/converts/dom-to-data-url.ts)\n\nDOM to data\n\n- [domToBlob](src/converts/dom-to-blob.ts)\n- [domToPixel](src/converts/dom-to-pixel.ts)\n\nDOM to HTMLElement\n\n- [domToForeignObjectSvg](src/converts/dom-to-foreign-object-svg.ts)\n- [domToImage](src/converts/dom-to-image.ts)\n- [domToCanvas](src/converts/dom-to-canvas.ts)\n\n## Options\n\nSee the [options.ts](src/options.ts)\n\n## Singleton context and web worker\n\nQuick screenshots per second by reusing context and web worker\n\n```ts\n// use vite\nimport workerUrl from '@egoist/dom-screenshot/worker?url'\nimport { createContext, destroyContext, domToPng } from '@egoist/dom-screenshot'\n\nasync function screenshotsPerSecond() {\n  const context = await createContext(document.querySelector('#app'), {\n    workerUrl,\n    workerNumber: 1,\n  })\n  for (let i = 0; i < 10; i++) {\n    domToPng(context).then((dataUrl) => {\n      const link = document.createElement('a')\n      link.download = `screenshot-${i + 1}.png`\n      link.href = dataUrl\n      link.click()\n      if (i + 1 === 10) {\n        destroyContext(context)\n      }\n    })\n    await new Promise((resolve) => setTimeout(resolve, 1000))\n  }\n}\n\nscreenshotsPerSecond()\n```\n\nSee the [context.ts](src/context.ts)\n\n## TODO\n\n- [ ] unable to clone [css counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)\n\n  `content: counter(step);`\n","readmeFilename":"README.md"}