{"id":27754354,"url":"https://github.com/zumerlab/snapdom","last_synced_at":"2025-06-28T19:41:07.877Z","repository":{"id":290175135,"uuid":"973606777","full_name":"zumerlab/snapdom","owner":"zumerlab","description":"snapDOM captures DOM elements as images with exceptional speed and minimal overhead. Designed to avoid bottlenecks and long tasks.","archived":false,"fork":false,"pushed_at":"2025-04-27T11:01:19.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T11:39:56.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zumerlab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-27T11:01:19.000Z","updated_at":"2025-04-27T11:01:23.000Z","dependencies_parsed_at":"2025-04-27T11:50:04.137Z","dependency_job_id":null,"html_url":"https://github.com/zumerlab/snapdom","commit_stats":null,"previous_names":["zumerlab/snapdom"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fsnapdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fsnapdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fsnapdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fsnapdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zumerlab","download_url":"https://codeload.github.com/zumerlab/snapdom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251157410,"owners_count":21544807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-29T06:01:46.267Z","updated_at":"2025-06-28T19:41:07.864Z","avatar_url":"https://github.com/zumerlab.png","language":null,"funding_links":[],"categories":["JavaScript","前端开发框架及项目","Web Frontend"],"sub_categories":["多工具库支持或纯JS","DOM \u0026 Browser APIs"],"readme":"# snapDOM\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://zumerlab.github.io/snapdom\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/zumerlab/snapdom/main/docs/assets/hero.png\" width=\"80%\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://www.npmjs.com/package/@zumer/snapdom\"\u003e\n    \u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@zumer/snapdom?style=flat-square\u0026label=Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/zumerlab/snapdom/graphs/contributors\"\u003e\n    \u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/zumerlab/snapdom?style=flat-square\u0026label=Contributors\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/zumerlab/snapdom/stargazers\"\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/zumerlab/snapdom?style=flat-square\u0026label=Stars\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/zumerlab/snapdom/network/members\"\u003e\n    \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/zumerlab/snapdom?style=flat-square\u0026label=Forks\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/zumerlab/snapdom/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/zumerlab/snapdom?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**snapDOM** is a fast and accurate DOM-to-image capture tool built for **Zumly**, a zoom-based view transition framework.\n\nIt captures any HTML element as a scalable SVG image, preserving styles, fonts, background images, pseudo-elements, and even shadow DOM. It also supports export to raster image formats and canvas.\n\n* 📸 Full DOM capture\n* 🎨 Embedded styles, pseudo-elements, and fonts\n* 🖼️ Export to SVG, PNG, JPG, WebP, or `canvas`\n* ⚡ Ultra fast, no dependencies\n* 📦 100% based on standard Web APIs\n\n## Demo\n\n[https://zumerlab.github.io/snapdom/](https://zumerlab.github.io/snapdom/)\n\n## Installation\n\n### NPM / Yarn\n\n```sh\nnpm i @zumer/snapdom\n```\n\n```sh\nyarn add @zumer/snapdom\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.min.js\"\u003e\u003c/script\u003e\n```\n\n### Script tag (local)\n\n```html\n\u003cscript src=\"snapdom.js\"\u003e\u003c/script\u003e\n```\n\n### ES Module\n\n```js\nimport { snapdom } from './snapdom.mjs';\n```\n\n### Module via CDN\n\n```html\n\u003cscript type=\"module\"\u003e\n  import { snapdom } from 'https://cdn.jsdelivr.net/npm/@zumer/snapdom/dist/snapdom.mjs';\n\u003c/script\u003e\n```\n\n## Basic usage\n\n### Reusable capture\n\n```js\nconst el = document.querySelector('#target');\nconst result = await snapdom(el, { scale: 2 });\n\nconst img = await result.toPng();\ndocument.body.appendChild(img);\n\nawait result.download({ format: 'jpg', filename: 'my-capture' });\n```\n\n### One-step shortcuts\n\n```js\nconst el = document.querySelector('#target');\nconst png = await snapdom.toPng(el);\ndocument.body.appendChild(png);\n\nconst blob = await snapdom.toBlob(el);\n```\n\n## API\n\n### `snapdom(el, options?)`\n\nReturns an object with reusable export methods:\n\n```js\n{\n  url: string;\n  toRaw(): string;\n  toImg(): Promise\u003cHTMLImageElement\u003e;\n  toCanvas(): Promise\u003cHTMLCanvasElement\u003e;\n  toBlob(): Promise\u003cBlob\u003e;\n  toPng(): Promise\u003cHTMLImageElement\u003e;\n  toJpg(options?): Promise\u003cHTMLImageElement\u003e;\n  toWebp(options?): Promise\u003cHTMLImageElement\u003e;\n  download(options?): Promise\u003cvoid\u003e;\n}\n```\n\n### Shortcut methods\n\n| Method                         | Description                           |\n| ------------------------------ | ------------------------------------- |\n| `snapdom.toImg(el, options?)`  | Returns an `HTMLImageElement`         |\n| `snapdom.toCanvas(el, options?)     ` | Returns a `Canvas`                    |\n| `snapdom.toBlob(el, options?)` | Returns an SVG `Blob`                 |\n| `snapdom.toPng(el, options?)`  | Returns a PNG image                   |\n| `snapdom.toJpg(el, options?)`  | Returns a JPG image                   |\n| `snapdom.toWebp(el, options?)` | Returns a WebP image                  |\n| `snapdom.download(el, options?)     ` | Triggers download in specified format |\n\n## Options\n\nAll capture methods accept an `options` object:\n\n| Option            | Type     | Default  | Description                                |\n| ----------------- | -------- | -------- | ------------------------------------------ |\n| `compress`        | boolean  | `true`   | Removes redundant styles                   |\n| `fast`            | boolean  | `true`   | Skips idle delay for faster results        |\n| `embedFonts`      | boolean  | `false`  | Inlines fonts (icon fonts always embedded) |\n| `scale`           | number   | `1`      | Output scale multiplier                    |\n| `backgroundColor` | string   | `\"#fff\"` | Fallback color for JPG/WebP                |\n| `quality`         | number   | `1`      | Quality for JPG/WebP (0 to 1)              |\n| `crossOrigin`     | function | -        | Function to determine CORS mode per image URL |\n\n### Cross-Origin Images\n\nBy default, snapDOM loads images with `crossOrigin=\"anonymous\"`. You can customize this behavior using the `crossOrigin` option:\n\n```js\nconst result = await snapdom(element, {\n  crossOrigin: (url) =\u003e {\n    // Use credentials for same-origin images\n    if (url.startsWith(window.location.origin)) {\n      return \"use-credentials\";\n    }\n    // Use anonymous for cross-origin images\n    return \"anonymous\";\n  }\n});\n```\n\nThis is useful when your images require authentication or when dealing with credentialed requests.\n\n### Download options\n\n```js\n{\n  format?: \"svg\" | \"png\" | \"jpg\" | \"jpeg\" | \"webp\"; // default: \"png\"\n  filename?: string;         // default: \"capture\"\n  backgroundColor?: string;  // optional override\n}\n```\n\n\n### `preCache()` – Optional helper\n\nThe `preCache()` function can be used to load external resources (like images and fonts) in advance. It is specially useful when the element to capure is big and complex.\n\n```js\nimport { preCache } from '@zumer/snapdom';\n\nawait preCache(document.body);\n```\n\n```js\nimport { snapdom, preCache } from './snapdom.mjs';\n    window.addEventListener('load', async () =\u003e {\n    await preCache();\n    console.log('📦 Resources preloaded');\n    });\n```\n\n**Options for `preCache()`:**\n\n* `embedFonts` *(boolean, default: true)* — Inlines non-icon fonts during preload.\n* `reset` *(boolean, default: false)* — Clears all existing internal caches.\n* `crossOrigin` *(function)* — Function to determine CORS mode per image URL during preload.\n\n\n## Features\n\n* Captures **shadow DOM** and Web Components\n* Supports `::before` and `::after` pseudo-elements\n* Inlines background images and fonts\n* Handles **Font Awesome**, **Material Icons**, and more\n* `data-capture=\"exclude\"` to ignore an element\n* `data-capture=\"placeholder\"` with `data-placeholder-text` for masked replacements\n\n## Limitations\n\n* External images must be CORS-accessible (use `crossOrigin` option for credentialed requests)\n* Iframes are not supported\n* When WebP format is used on Safari, it will fallback to PNG rendering.\n* `@font-face` CSS rule is well supported, but if need to use JS `FontFace()`, see this workaround [`#43`](https://github.com/zumerlab/snapdom/issues/43)\n\n## Benchmarks\n\n`snapDOM` is not only highly accurate — it’s **extremely fast**.\n\nLatest benchmarks show significant performance improvements against other libraries:\n\n| Scenario                         | vs. `modern-screenshot` | vs. `html2canvas` |\n| -------------------------------- | :---------------------: | :---------------: |\n| Small element (200×100)          |       6.46× faster      |   32.27× faster   |\n| Modal size (400×300)             |       7.28× faster      |   32.66× faster   |\n| Page view (1200×800)             |      13.17× faster      |   35.29× faster   |\n| Large scroll area (2000×1500)    |      38.23× faster      |   68.85× faster   |\n| Very large element (4000×2000)   |      93.31× faster      |   133.12× faster  |\n| Complex small element (200×100)  |       3.97× faster      |   15.23× faster   |\n| Complex modal (400×300)          |       2.32× faster      |    5.33× faster   |\n| Complex page (1200×800)          |       1.62× faster      |    1.65× faster   |\n| Complex large scroll (2000×1500) |       1.66× faster      |    1.24× faster   |\n| Complex very large (4000×2000)   |       1.52× faster      |    1.28× faster   |\n\n\n### Run the benchmarks\n\nTo run these benchmarks yourself:\n\n```sh\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\nnpm install\nnpm run test:benchmark\n```\n\nThey execute in **headless Chromium** using real DOM nodes.\n\n## Development\n\nTo contribute or build snapDOM locally:\n\n```sh\n# Clone the repository\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\n\n# Install dependencies\nnpm install\n\n# Compile the library (ESM, CJS, and minified versions)\nnpm run compile\n\n# Run tests\nnpm test\n\n# Run Benchmarks\nnpm run test:benchmark\n```\n\nThe main entry point is in `src/`, and output bundles are generated in the `dist/` folder.\n\nFor detailed contribution guidelines, please see [CONTRIBUTING](https://github.com/zumerlab/snapdom/blob/main/CONTRIBUTING.md).\n\n\n## Contributors 🙌\n\n\u003c!-- CONTRIBUTORS:START --\u003e\n\u003cp\u003e\n\u003ca href=\"https://github.com/tinchox5\" title=\"tinchox5\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/11557901?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"tinchox5\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/pedrocateexte\" title=\"pedrocateexte\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/207524750?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"pedrocateexte\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/domialex\" title=\"domialex\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4694217?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"domialex\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/elliots\" title=\"elliots\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/622455?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"elliots\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/jswhisperer\" title=\"jswhisperer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1177690?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"jswhisperer\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/jhbae200\" title=\"jhbae200\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20170610?v=4\u0026s=100\" style=\"border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;\" alt=\"jhbae200\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- CONTRIBUTORS:END --\u003e\n\n## License\n\nMIT © Zumerlab\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Fsnapdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzumerlab%2Fsnapdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Fsnapdom/lists"}