如何使用JavaScript从DOM元素捕获图像

本文概述

要求
怎么运行的
实现
现场例子

尽管如果你的一个项目中不需要此功能, 你会发现此功能确实很有趣。顾名思义, 该库将以Base64格式从文档的节点生成图像或svg。是的, 每个html标签, 无论你想要什么, 都可以使用javascript渲染成图像, 而无需在任何现代浏览器上对任何服务器或任何东西创建外部调用。
要求为了实现此任务, 我们将依赖dom-to-image Javascript库。 Dom-to-image是一个库, 可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像。它基于Paul Bakaus的domvas进行了完全重写, 已修复了一些错误, 并添加了一些新功能(如Web字体和图像支持)。
你可以使用NPM获取脚本：

npm install dom-to-image

或仅在官方Github存储库中下载.zip文件(或导航)。
怎么运行的该库使用SVG的功能, 该功能允许在< foreignObject> 标记内包含任意HTML内容。因此, 为了为你呈现该DOM节点, 请执行以下步骤：
以递归方式克隆原始DOM节点。
计算节点和每个子节点的样式, 然后将其复制到相应的克隆中, 不要忘记重新创建伪元素, 因为它们不会以任何方式克隆。
嵌入网络字体：

找到所有可能表示网络字体的@ font-face声明
解析文件URL, 下载相应文件
base64编码并将内联内容作为数据：URL
连接所有已处理的CSS规则, 并将它们放入一个< style> 元素中, 然后将其附加到克隆中

嵌入图片：

在< img> 元素中嵌入图像URL
背景CSS属性中使用的嵌入式图像, 其方式类似于字体

将克隆的节点序列化为XML。
将XML包装到< foreignObject> 标记中, 然后包装到SVG中, 然后使其成为数据URL。
(可选)要以Uint8Array的形式获取PNG内容或原始像素数据, 请创建一个以SVG为源的Image元素, 并将其呈现在你还创建的屏幕外画布上, 然后从画布中读取内容。
实现所有顶级功能都接受DOM节点和呈现选项, 并返回诺言, 这些诺言通过相应的数据URL来实现。
PNG元素
要创建PNG图像, 请使用domtoimage.toPng方法：

< div id="my-node"> < p> Some HTML content or images.< /p> < /div> < script> var node = document.getElementById('my-node'); domtoimage.toPng(node).then(function (dataUrl) {var img = new Image(); img.src = http://www.srcmini.com/dataUrl; document.body.appendChild(img); }).catch(function (error) {console.error('oops, something went wrong!', error); }); < /script>

JPEG元素
要创建JPEG图像, 请使用domtoimage.toJpeg方法：

< div id="my-node"> < p> Some HTML content or images.< /p> < /div> < script> var node = document.getElementById('my-node'); var options = {quality: 0.95 }; domtoimage.toJpeg(node, options).then(function (dataUrl) {// Do something with the dataURL (data:image/jpeg; base64, i........)}); < /script>

元素到Blob
如果需要检索Blob而不是Base64字符串, 则可以使用domtoimage.toBlob方法, 该方法从呈现的DOM中以PNG返回Blob：

< div id="my-node"> < p> Some HTML content or images.< /p> < /div> < script> var node = document.getElementById('my-node'); domtoimage.toBlob(node).then(function (blob) {window.saveAs(blob, 'my-node.png'); }); < /script>

在前面的示例中, 我们使用FileSaver插件, 该插件使你可以使用Javascript在浏览器中下载文件(从Blob)。
现场例子尝试一下以下小提琴, 每次单击” 创建” 按钮时, 都会将base64图像附加到文档中。更改文本区域的内容以查看结果：
它已经在最新的Chrome和Firefox(在撰写本文时分别为49和45)上进行了测试, Chrome在大型DOM树上的性能明显更好, 这可能是由于它对SVG的性能更高, 并且它支持CSSStyleDeclaration.cssText属性。不(也将不)支持Internet Explorer, 因为它不支持SVG < foreignObject> 标记。
【如何使用JavaScript从DOM元素捕获图像】玩得开心！