dom-to-image vs html2canvas
网页截图
搜索包...
dom-to-imagehtml2canvas类似的npm包:

网页截图

网页截图是指将网页的内容捕获并保存为图像文件的过程。这在创建网页预览、生成报告或保存在线内容时非常有用。dom-to-image 和 html2canvas 是两个流行的 JavaScript 库，它们可以将 HTML 元素转换为图像。dom-to-image 允许将 DOM 元素转换为 PNG、JPEG 或 SVG 格式的图像，并支持自定义样式和背景。html2canvas 则通过在浏览器中渲染元素并生成画布（canvas）来捕获网页内容，支持文本、图像和样式，但对跨域图像和某些 CSS 特性可能存在限制。

npm下载趋势

3 年

GitHub Stars 排名

统计详情

npm包名称
下载量
Stars
大小
Issues
发布时间
License
dom-to-image010,777-3399 年前MIT
html2canvas031,8463.38 MB1,051-MIT

功能对比: dom-to-image vs html2canvas

输出格式

  • dom-to-image:

    dom-to-image 支持将 DOM 元素转换为多种格式的图像，包括 PNG、JPEG 和 SVG。您可以通过设置参数来选择输出格式，甚至可以将图像直接下载或嵌入到网页中。

  • html2canvas:

    html2canvas 生成一个包含网页元素的画布（canvas），然后可以将其转换为 PNG 格式的图像。虽然它主要支持 PNG，但您可以通过画布 API 将图像转换为其他格式。

跨域支持

  • dom-to-image:

    dom-to-image 对跨域图像的支持较好，但需要确保图像的 CORS（跨域资源共享）设置正确。您可以通过设置 allowTaint 和 useCORS 参数来处理跨域图像。

  • html2canvas:

    html2canvas 对跨域图像的支持有限。如果图像没有正确设置 CORS，html2canvas 将无法捕获它们。这可能导致生成的图像中缺少跨域内容。

样式处理

  • dom-to-image:

    dom-to-image 能够较好地处理元素的 CSS 样式，包括背景、边框和阴影等。您可以通过自定义函数来处理特定样式，使其更加灵活。

  • html2canvas:

    html2canvas 尝试捕获元素的所有 CSS 样式，包括文本、背景和边框。然而，它对某些复杂样式（如伪元素、滤镜等）的支持可能不完全。

SVG 支持

  • dom-to-image:

    dom-to-image 原生支持将 SVG 元素转换为图像。这使得它在处理包含 SVG 图形的 DOM 元素时表现出色。

  • html2canvas:

    html2canvas 也可以捕获 SVG 元素，但它会将其渲染为位图（bitmap），这可能导致在放大时失去清晰度。

代码示例

  • dom-to-image:

    使用 dom-to-image 捕获 DOM 元素并下载图像

    import { toPng } from 'dom-to-image';
const node = document.getElementById('my-node');
toPng(node)
  .then((dataUrl) => {
    const img = new Image();
    img.src = dataUrl;
    document.body.appendChild(img);
  })
  .catch((error) => {
    console.error('Error capturing image:', error);
  });
  • html2canvas:

    使用 html2canvas 捕获元素并生成图像

    import html2canvas from 'html2canvas';
const element = document.getElementById('my-element');
html2canvas(element)
  .then((canvas) => {
    document.body.appendChild(canvas);
    const img = canvas.toDataURL('image/png');
    console.log(img);
  })
  .catch((error) => {
    console.error('Error capturing element:', error);
  });

如何选择: dom-to-image vs html2canvas

  • dom-to-image:

    选择 dom-to-image 如果您需要将 DOM 元素转换为图像，并且希望支持 SVG 输出。它允许更细粒度的控制，例如设置图像背景、处理跨域图像（需要额外配置）以及自定义图像的样式。

  • html2canvas:

    选择 html2canvas 如果您想捕获整个网页或特定元素的快照，包括其样式和布局。它适用于需要快速生成画布图像的场景，但请注意，它对某些 CSS 特性和跨域图像的支持可能有限。

与dom-to-image类似的npm包

dom-to-image 是一个用于将 DOM 元素转换为图像的 JavaScript 库。它允许开发者轻松地将网页中的元素（如 div、canvas 等）转换为 PNG 或 JPEG 格式的图像。这个库在生成图像时提供了多种选项，可以自定义图像的质量和背景等属性。虽然 dom-to-image 提供了强大的功能，但在 React 生态系统中还有其他一些库可以实现类似的功能。以下是几个替代方案：

  • html-to-image 是一个轻量级的库，可以将 HTML 元素转换为图像。它支持多种图像格式，并且使用起来非常简单。与 dom-to-image 类似，html-to-image 也提供了自定义选项，可以控制图像的输出质量和样式。这个库特别适合需要快速生成图像的项目，且其 API 设计简洁易用。
  • html2canvas 是一个广泛使用的库，可以将 HTML 元素渲染为画布（canvas），然后将画布转换为图像。html2canvas 支持复杂的样式和布局，能够捕获整个页面或特定元素的视觉效果。虽然它的功能强大，但在某些情况下可能会遇到跨域问题或样式兼容性问题。如果你需要捕获网页的完整视觉效果，html2canvas 是一个不错的选择。
  • screenshot-desktop 是一个用于截取桌面屏幕的库，主要用于 Electron 应用或 Node.js 环境。与其他库不同，screenshot-desktop 允许你捕获整个桌面屏幕，而不仅仅是网页中的 DOM 元素。如果你的应用需要截取用户的桌面屏幕，screenshot-desktop 是一个理想的解决方案。

要查看 dom-to-image 与其他库的比较，请访问：比较 dom-to-image、html-to-image、html2canvas 和 screenshot-desktop。

与html2canvas类似的npm包

html2canvas 是一个用于将 HTML 元素转换为画布（canvas）图像的 JavaScript 库。它可以捕获网页上的 DOM 元素，并将其渲染为图像，方便进行截图、生成 PDF 或其他图像处理操作。html2canvas 的使用非常简单，开发者只需指定要捕获的元素，库会自动处理样式和布局，生成相应的画布。

虽然 html2canvas 提供了强大的功能，但在某些情况下，开发者可能会考虑其他替代方案。以下是一个主要的替代库：

  • dom-to-image 是一个轻量级的库，用于将 DOM 元素转换为图像。与 html2canvas 类似，dom-to-image 也可以捕获网页上的元素并生成 PNG 或 JPEG 格式的图像。它的优点在于支持 SVG 和 CSS 样式的转换，能够更好地处理某些复杂的图形和样式。对于需要将 DOM 元素转换为图像的项目，dom-to-image 提供了一个简单而有效的解决方案。

要查看 html2canvas 和 dom-to-image 的比较，请访问以下链接：比较 dom-to-image 和 html2canvas。

dom-to-image的README

DOM to Image

Build Status

What is it

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.

Installation

NPM

npm install dom-to-image

Then load

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

Bower

bower install dom-to-image

Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

<script src="path/to/dom-to-image.min.js" />
<script>
  domtoimage.toPng(node)
  //...
</script>

Usage

All the top level functions accept DOM node and rendering options, and return promises, which are fulfilled with corresponding data URLs.
Get a PNG image base64-encoded data URL and display right away:

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Get a PNG image blob and download it (using FileSaver, for example):

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });

Save and download a compressed JPEG image:

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

Get an SVG data URL, but filter out all the <i> elements:

function filter (node) {
    return (node.tagName !== 'i');
}

domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
    });

Get the raw pixel data as a Uint8Array with every 4 array elements representing the RGBA data of a pixel:

var node = document.getElementById('my-node');

domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight; ++y) {
          for (var x = 0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

All the functions under impl are not public API and are exposed only for unit testing.

Rendering options

filter

A function taking DOM node as argument. Should return true if passed node should be included in the output (excluding node means excluding it's children as well). Not called on the root node.

bgcolor

A string value for the background color, any valid CSS color value.

height, width

Height and width in pixels to be applied to node before rendering.

style

An object whose properties to be copied to node's style before rendering. You might want to check this reference for JavaScript names of CSS properties.

quality

A number between 0 and 1 indicating image quality (e.g. 0.92 => 92%) of the JPEG image. Defaults to 1.0 (100%)

cacheBust

Set to true to append the current time as a query string to URL requests to enable cache busting. Defaults to false

imagePlaceholder

A data URL for a placeholder image that will be used when fetching an image fails. Defaults to undefined and will throw an error on failed images

Browsers

It's tested on latest Chrome and Firefox (49 and 45 respectively at the time of writing), with Chrome performing significantly better on big DOM trees, possibly due to it's more performant SVG support, and the fact that it supports CSSStyleDeclaration.cssText property.

Internet Explorer is not (and will not be) supported, as it does not support SVG <foreignObject> tag

Safari is not supported, as it uses a stricter security model on <foreignObject> tag. Suggested workaround is to use toSvg and render on the server.`

Dependencies

Source

Only standard lib is currently used, but make sure your browser supports:

Tests

Most importantly, tests depend on:

  • js-imagediff, to compare rendered and control images

  • ocrad.js, for the parts when you can't compare images (due to the browser rendering differences) and just have to test whether the text is rendered

How it works

There might some day exist (or maybe already exists?) a simple and standard way of exporting parts of the HTML to image (and then this script can only serve as an evidence of all the hoops I had to jump through in order to get such obvious thing done) but I haven't found one so far.

This library uses a feature of SVG that allows having arbitrary HTML content inside of the <foreignObject> tag. So, in order to render that DOM node for you, following steps are taken:

  1. Clone the original DOM node recursively

  2. Compute the style for the node and each sub-node and copy it to corresponding clone

    • and don't forget to recreate pseudo-elements, as they are not cloned in any way, of course

  3. Embed web fonts

    • find all the @font-face declarations that might represent web fonts

    • parse file URLs, download corresponding files

    • base64-encode and inline content as data: URLs

    • concatenate all the processed CSS rules and put them into one <style> element, then attach it to the clone

  4. Embed images

    • embed image URLs in <img> elements

    • inline images used in background CSS property, in a fashion similar to fonts

  5. Serialize the cloned node to XML

  6. Wrap XML into the <foreignObject> tag, then into the SVG, then make it a data URL

  7. Optionally, to get PNG content or raw pixel data as a Uint8Array, create an Image element with the SVG as a source, and render it on an off-screen canvas, that you have also created, then read the content from the canvas

  8. Done!

Things to watch out for

  • if the DOM node you want to render includes a <canvas> element with something drawn on it, it should be handled fine, unless the canvas is tainted - in this case rendering will rather not succeed.

  • at the time of writing, Firefox has a problem with some external stylesheets (see issue #13). In such case, the error will be caught and logged.

Authors

Anatolii Saienko, Paul Bakaus (original idea)

License

MIT

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.