{"_id":"@aeharding/modern-screenshot","name":"@aeharding/modern-screenshot","dist-tags":{"latest":"4.5.0"},"versions":{"4.5.0":{"name":"@aeharding/modern-screenshot","type":"module","version":"4.5.0","packageManager":"pnpm@8.7.6","description":"Quickly generate image from DOM node using HTML5 canvas and SVG","author":{"name":"wxm"},"license":"MIT","homepage":"https://github.com/qq15725/modern-screenshot","repository":{"type":"git","url":"git+https://github.com/qq15725/modern-screenshot.git"},"bugs":{"url":"https://github.com/qq15725/modern-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"]}},"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":"^19.7.1","typescript":"^4.9.5","vite":"^4.1.3","vitest":"^0.28.5"},"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"},"_id":"@aeharding/modern-screenshot@4.5.0","_integrity":"sha512-EEfz3JCF4/Nt2ynS/h4DKx5Gfg39J5F1I8yiFZIomzNThKCeiiSFl1k9D0HQBuT8pYmh30b6pPai1LDC+QhTeg==","_resolved":"/private/var/folders/h2/r9tdztpj1wqbwmtnqmhqzvw40000gn/T/300ab6ebdaca50380085fdd871e3b429/aeharding-modern-screenshot-4.5.0.tgz","_from":"file:aeharding-modern-screenshot-4.5.0.tgz","_nodeVersion":"20.8.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-EEfz3JCF4/Nt2ynS/h4DKx5Gfg39J5F1I8yiFZIomzNThKCeiiSFl1k9D0HQBuT8pYmh30b6pPai1LDC+QhTeg==","shasum":"8d4b64d322be02c7beb336371d416f8ec85d0d12","tarball":"https://registry.npmjs.org/@aeharding/modern-screenshot/-/modern-screenshot-4.5.0.tgz","fileCount":48,"unpackedSize":124640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQlx1zGoP4KJZxqMH37naBLvbuEFhDSJ52VIdlKMwt4AiEAiYIi7ogiAUF9fYoz8DYSeDzxErXYD2Qc6ye1EOOqvJU="}]},"_npmUser":{"name":"aeharding","email":"aeharding@gmail.com"},"directories":{},"maintainers":[{"name":"aeharding","email":"aeharding@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modern-screenshot_4.5.0_1701486175912_0.4398175985820796"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-02T03:02:55.911Z","4.5.0":"2023-12-02T03:02:56.135Z","modified":"2023-12-02T03:02:56.442Z"},"maintainers":[{"name":"aeharding","email":"aeharding@gmail.com"}],"description":"Quickly generate image from DOM node using HTML5 canvas and SVG","homepage":"https://github.com/qq15725/modern-screenshot","keywords":["dom","image","raster","render","html","canvas","svg","screenshot","modern"],"repository":{"type":"git","url":"git+https://github.com/qq15725/modern-screenshot.git"},"author":{"name":"wxm"},"bugs":{"url":"https://github.com/qq15725/modern-screenshot/issues"},"license":"MIT","readme":"<h1 align=\"center\">modern-screenshot</h1>\n\n<p align=\"center\">\n  <a href=\"https://unpkg.com/modern-screenshot\">\n    <img src=\"https://img.shields.io/bundlephobia/minzip/modern-screenshot\" alt=\"Minzip\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/modern-screenshot\">\n    <img src=\"https://img.shields.io/npm/v/modern-screenshot.svg\" alt=\"Version\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/modern-screenshot\">\n    <img src=\"https://img.shields.io/npm/dm/modern-screenshot\" alt=\"Downloads\">\n  </a>\n  <a href=\"https://github.com/qq15725/modern-screenshot/issues\">\n    <img src=\"https://img.shields.io/github/issues/qq15725/modern-screenshot\" alt=\"Issues\">\n  </a>\n  <a href=\"https://github.com/qq15725/modern-screenshot/blob/master/LICENSE\">\n    <img src=\"https://img.shields.io/npm/l/modern-screenshot.svg\" alt=\"License\">\n  </a>\n</p>\n\n<p align=\"center\">使用 HTML5 canvas 和 SVG 从 DOM 节点快速生成图像</p>\n\n<p align=\"center\">Fork from <a href=\"https://github.com/bubkoo/html-to-image\">html-to-image</a></p>\n\n<p align=\"center\"><a href=\"README.md\">English</a> | 简体中文</p>\n\n## 📦 安装\n\n```sh\nnpm i modern-screenshot\n```\n\n## 🦄 使用\n\n```ts\nimport { domToPng } from 'modern-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/modern-screenshot\"></script>\n<script>\n  modernScreenshot.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>浏览器控制台</summary><br>\n\n> ⚠️ 由于 CORS 部分嵌入将失败\n\n  ```js\n  const script = document.createElement('script')\n  script.src = \"https://unpkg.com/modern-screenshot\"\n  document.getElementsByTagName('head')[0].appendChild(script)\n\n  script.onload = () => {\n    modernScreenshot\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('%c ', [\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<br></details>\n\n## 方法\n\n> `method(node: Node, options?: Options)`\n\nDOM 转 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 转 data\n\n- [domToBlob](src/converts/dom-to-blob.ts)\n- [domToPixel](src/converts/dom-to-pixel.ts)\n\nDOM 转 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## 选项\n\n请查看 [options.ts](src/options.ts)\n\n## 单例上下文和 web worker\n\n通过重用上下文和 web worker，每秒快速截图\n\n```ts\n// use vite\nimport workerUrl from 'modern-screenshot/worker?url'\nimport { createContext, destroyContext, domToPng } from 'modern-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\n请查看 [context.ts](src/context.ts)\n\n## 待办事项\n\n- [ ] 无法克隆 [css 计数器](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)\n\n  `content: counter(step);`\n","readmeFilename":"README.zh-CN.md"}