Dom-to-image截图将html生成图片

OM to Image

dom-to-image是一个js库，可以将任意dom节点转换为矢量(SVG)或光栅(PNG或JPEG)图像。

安装

npm install dom-to-image -S

加载

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

用法

所有高阶函数都接受DOM节点和渲染选项options ，并返回promises。

获取PNG图像base64编码的data URL：

<div id="my-node"></div>

var node = document.getElementById('my-node');
// options 可不传
var options = {}  
domtoimage.toPng(node, options)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

获取图像blob：

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) { 
        console.log('blob', blob)
    });

获取JPEG图像base64编码的data URL并下载：

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

获取SVGdata URL，但筛选出所有元素：

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

以uint8数组的形式获取原始像素数据，每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);
          }
        }
    });

options参数

Name	类型	Default	Description
filter	Function	——	以DOM节点为参数的函数。如果传递的节点应包含在输出中，则应返回true(排除节点意味着也排除其子节点)
bgcolor	String	——	背景色的字符串值，任何有效的CSS颜色值。
height	Number	——	渲染前应用于节点的高度（以像素为单位）。
width	Number	——	渲染前应用于节点的宽度（以像素为单位）。
style	Object	——	object对象，其属性在渲染之前要复制到节点的样式中。
quality	Number	1.0	介于0和1之间的数字，表示JPEG图像的图像质量(例如0.92=>92%)。默认值为1.0（100%）
cacheBust	Boolean	false	设置为true可将当前时间作为查询字符串附加到URL请求以启用清除缓存。
imagePlaceholder	Boolean	undefined	获取图片失败时使用图片的数据URL作为占位符。默认为未定义，并将在失败的图像上引发错误。

原理

dom-to-image使用SVG的一个特性，它允许在标记中包含任意HTML内容。

递归地克隆原始DOM节点
计算节点和每个子节点的样式，并将其复制到相应的克隆创建伪元素，因为它们不是以任何方式克隆的
嵌入web字体查找所有@font face声明的web字体解析文件URL，下载相应文件 base64编码的内联作为data：URLs 将所有已处理的CSS放入中，然后将其附加到克隆
嵌入图片在嵌入图片URL 使用backgroundCSS属性的图片，方法类似于字体
将克隆的节点序列化为XML
将XML包装到标记中，然后包装到SVG中，然后使其成为data URL
或者，要以Uint8Array的形式获取PNG内容或原始像素数据，可以创建一个以SVG为源的图像元素，并将其呈现在已经创建的canvas上，从canvas读取内容

部分源码分析

dom-to-image.js

// Default impl options
var defaultOptions = {
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false
};

var domtoimage = {
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
        fontFaces: fontFaces,
        images: images,
        util: util,
        inliner: inliner,
        options: {}
    }
};

if (typeof module !== 'undefined')
    module.exports = domtoimage;
else
    global.domtoimage = domtoimage;

defaultOptions设置默认options选项
domtoimage的核心api:

toSvg
toPng
toJpeg
toBlob
toPixelData

例：toJpeg：将draw函数返回的canvas实例，使用canvas的toDataURL方法生成jpeg图片。toSvg函数将递归地克隆原始DOM节点, 将克隆的节点序列化为XML,将XML包装到标记中，然后包装到SVG中，然后使其转成dataURL。

function toJpeg(node, options) {
   options = options || {};
   return draw(node, options)
       .then(function (canvas) {
           return canvas.toDataURL('image/jpeg', options.quality || 1.0);
       });
}
复制代码

function draw(domNode, options) {
    return toSvg(domNode, options)
        .then(util.makeImage)
        .then(util.delay(100))
        .then(function (image) {
            var canvas = newCanvas(domNode);
            canvas.getContext('2d').drawImage(image, 0, 0);
            return canvas;
        });

    function newCanvas(domNode) {
        var canvas = document.createElement('canvas');
        canvas.width = options.width || util.width(domNode);
        canvas.height = options.height || util.height(domNode);

        if (options.bgcolor) {
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = options.bgcolor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        return canvas;
    }
}

function toSvg(node, options) {
    options = options || {};
    copyOptions(options);
    return Promise.resolve(node)
        .then(function (node) {
            return cloneNode(node, options.filter, true);
        })
        .then(embedFonts)
        .then(inlineImages)
        .then(applyOptions)
        .then(function (clone) {
            return makeSvgDataUri(clone,
                options.width || util.width(node),
                options.height || util.height(node)
            );
        });

    function applyOptions(clone) {
        if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;

        if (options.width) clone.style.width = options.width + 'px';
        if (options.height) clone.style.height = options.height + 'px';

        if (options.style)
            Object.keys(options.style).forEach(function (property) {
                clone.style[property] = options.style[property];
            });

        return clone;
    }
}

作者：知其
https://juejin.cn/post/6988045156473634852

这样一个需求，就是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。

方法一：使用伪元素

这是在日常开发中被推荐使用的方法，通过这种方式实现不会影响到div中的其他内容的透明度只会影响它自己背景的透明度，详细实现如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 调整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            这里是内容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA颜色叠加

这种方式比较适合那种需要给背景图片上添加蒙版的情况，但是笔者尝试的时候，结果实在是不尽人意。所以还是选择了上面的推荐方法，不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

方法三：使用CSS滤镜

这种方式实现会影响到整个的div的样式，也就是说页面中的内容的透明度也会受到影响，并且这种影响不会被其他样式所改变。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 调整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

以上就是实现如何调整div的背景透明度，在一些特殊场景中我们还可以通过JS的方式来实现。上面的方法中，推荐使用的是伪元素方法，因为它在修改了div背景透明度之后，并不会影响到其他的元素，RGBA色彩添加则是局限于一些色彩华丽的地方使用，而对于一些单色调的内容来讲这种方式实现效果不是太好。通过CSS过滤样式，虽然是最直接的方式，但是如果在div内部有内容的情况下会影响到整个组件体系的样式。

在实际开发中，我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式，有兴趣的读者可以留言我们一起讨论。

么是 JPG 格式照片

JPEG（Joint Photographic Experts Group）是用于数字图像压缩的一种标准，其文件扩展名为 .jpg 或 .jpeg。这种格式通过有损压缩算法来减少文件大小，非常适合存储和传输具有丰富细节的照片，如风景、人物等。

JPG 格式在保持高质量图像的同时，可以大幅度减小文件体积，使其成为网络、电子邮件以及移动设备上分享照片的理想选择。

JPG 图片格式转换的重要性

尽管 JPG 格式因其高效率而广受欢迎，但在某些场景下，可能需要将 JPG 转换为其他格式，比如 PNG（无损压缩，支持透明背景）、GIF（动画图像）、TIFF（专业用途，高保真度）、SVG（矢量图形，可无限缩放）等。

不同的格式适用于不同的需求，例如网页设计、打印出版、专业编辑或是动画制作等。

使用简鹿格式工厂软件进行 JPG 格式转换

简鹿格式工厂是一款功能强大的多媒体文件转换软件，它不仅支持音频和视频格式的转换，还提供了丰富的图片格式转换选项。以下是使用简鹿格式工厂将 JPG 图片转换为其他格式的步骤：

1、下载并安装简鹿格式工厂，启动软件并选择“图片格式转换”选项。

2、点击“添加文件”按钮，从你的电脑中选择想要转换的 JPG 图片。在软件界面中，选择你希望转换成的目标格式，例如 PNG、GIF、TIFF 或 SVG 等。

3、根据需要调整图片的质量、分辨率或尺寸等参数。确认所有设置无误后，点击“全部转换”按钮，简鹿格式工厂将自动处理转换任务。转换完成后，软件会提示你文件已保存的位置，你可以在指定目录下找到转换后的图片。

为什么常见的图片都是 JPG 格式？

JPG 使用的是有损压缩技术，这意味着在压缩过程中会丢失一些图像数据，但这通常不会对视觉质量产生显著影响。由于这种高效的压缩，JPG 文件相对较小，这使得它们在网络上传输、存储和分享时非常实用。

几乎所有的操作系统、浏览器、图像编辑软件和移动设备都支持 JPG 格式。这种广泛的兼容性确保了无论在哪种设备上查看或编辑图片，都不会遇到格式不兼容的问题。

然而，JPG 格式并非没有缺点。例如，由于是有损压缩，重复保存和编辑 JPG 图像会导致质量下降，即所谓的“世代损失”。此外，JPG 不支持透明度，如果需要透明背景，则 PNG 等其他格式更为合适。

在近年来，随着网络速度的提升和存储成本的降低，一些新的图片格式如 WebP 和 AVIF 也开始流行，这些格式在提供更好的压缩率和质量的同时，也支持更多的特性，如透明度和动画。不过，由于 JPG 的广泛兼容性和历史惯性，它仍然是一种非常流行的图片格式。

总结

掌握 JPG 格式照片的特性和转换技巧对于任何从事创意工作的人士来说都是十分必要的。使用简鹿格式工厂这样的工具，可以轻松实现不同格式之间的转换，满足各种应用场景的需求。无论是为了提高工作效率，还是为了追求更佳的视觉效果，正确的图片格式转换都是关键所在。

除了使用简鹿格式工厂外，目前仍然有非常多的图像格式转换工具，无论是在线还是本地或者使用命令行方式手动执行，它都可以把某些图像格式转为特定的图像格式。

在线咨询

上一篇：万能的HTML5，这次我们用javascript画流动的瀑布
下一篇：word个人简历免费模板下载

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商