前言

最新做一个JS截图的功能，了解到 domToImage 这个插件，还算轻巧好用。看了下只有英文文档，尝试翻译一下。四级的英语水平也不知道翻译得到不到位，欢迎指正昂~
（另外还有个比较多见的JS截图插件 html2canvas，后面有空再出一篇html2canvas和domToImage对比的。）

翻译自：https://github.com/tsayen/dom-to-image

DOM to Image

是什么

dom-to-image 是一个JS类库，它可以将任意DOM节点转换成 SVG/PNG/JPEG 格式的图像。它基于 domvas by Paul Bakaus 进行重写，修复了一些一至错误，并添加了部分功能（如web字体和图像支持）。

安装

NPM

npm install dom-to-image

引入

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

Bower

bower install dom-to-image

在页面中引入 src/dom-to-image.js 或 dist/dom-to-image.min.js，将注入一个全局变量 domtoimage ，你可以在全局范围内使用它。

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

使用

所有的顶层函数都可以接收一个 DOM 节点和渲染参数，并返回一个带有 dataUrls 的 promise。

生成一个 base64编码格式的 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);
    });

生成一个 Blob 格式的 PNG 图片，并下载它（此处的下载使用 FileSaver）：

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

生成并下载一个被压缩的 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();
    });

生成一个 base64编码格式的 SVG ，并过滤掉其中的 元素：

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

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

以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

接收一个过滤函数。

bgcolor

指定背景颜色。接收任意有效的CSS色值字符串。

height,width

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

style

接收一个指定节点样式的对象。

quality

接收0到1之间的数字（例如0.92 => 92％），用于指定JPEG图像的图像质量。默认为1.0（100％）

cacheBust

设置为true时，会将当前时间作为请求参数附加到URL请求，以启用缓存清除。默认为false。

imagePlaceholder

接收一个占位图的 dataUrl，在图片转换失败时使用。默认为 undefined，图片转换失败时抛出错误。

浏览器支持

已在最新版的Chrome(49) 和 Firefox(45) 浏览器中进行测试。对于节点数量较大的DOM树，Chrome 的性能明显比 Firefox 要好，可能是因为它对 SVG 的渲染性能更高，而且它支持CSSStyleDeclaration.cssText 属性。

不支持 IE。因为IE浏览器不支持 SVG 的 <foreignObject> 标签。

不支持 Safari。因为它对<foreignObject> 标签使用了更严格的安全模型。建议使用 toSvg 在服务器上进行渲染。

domToImage 中文文档

前言