从html生成图片并下载------domtoimage

最新推荐文章于 2025-02-28 17:30:58 发布

zxuanxuanz

最新推荐文章于 2025-02-28 17:30:58 发布

阅读量1.1k

点赞数

分类专栏： vue插件使用文章标签： html js image

本文链接：https://blog.csdn.net/qq_40542728/article/details/117029978

版权

vue插件使用专栏收录该内容

7 篇文章

订阅专栏

本文介绍dom-to-image插件的基本使用方法，包括下载、引入及主要API使用示例，如生成PNG/JPEG图片、获取SVG数据URL等。同时对比了html2canvas插件，帮助开发者根据实际需求进行选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载

npm install dom-to-image

二、引入

import domtoimage from 'dom-to-image';

三、domtoimage主要方法

1、生成png图片

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);
    });

2、获取一个PNG图像blob并下载

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

3、保存并下载压缩的JPEG图像

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();
    });

4、获取SVG数据URL，但过滤掉所有<i>元素

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

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

5、以Uint8Array的形式获取原始像素数据，每4个数组元素代表一个像素的RGBA数据

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);
          }
        }
    });

四、渲染选项

filter

以DOM节点为参数的函数。如果传递的节点应包含在输出中，则应返回true（不包括节点意味着也排除其子代）。在根节点上未调用。
bgcolor
背景颜色的字符串值，任何有效的CSS颜色值。

height, width

渲染前要应用于节点的高度和宽度（以像素为单位）。

style

一个对象，其属性将在呈现之前复制到节点的样式。您可能要检查此参考中CSS属性的JavaScript名称。

quality

0到1之间的数字表示JPEG图像的图像质量（例如0.92 => 92％）。默认为1.0（100％）

cacheBust

设置为true会将当前时间作为查询字符串附加到URL请求以启用缓存清除。默认为false

imagePlaceholder

在获取图像时将使用的占位符图像的数据URL失败。默认为未定义，将在失败的图像上引发错误