如何使用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 = 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>标记。

玩得开心 ！