Vue · 页面截图、canvas绘图插件：domtoimage

domtoimage

安装

npm install dom-to-image

使用
my-node为要转换的文档id， 将dataUrl赋值给img的src实现预览

<template>
  <div>
    <div id="my-node" @click="drawImage">
    	<img src="@/assets/images/mine-avator.png" />
    div>
    <img :src="imgUrl" alt="" />
  div>
template>

<script>
import domtoimage from "dom-to-image";
export default {
  data() {
    return {
      imgUrl: "",
    };
  },
  components: {
    domtoimage,
  },
  created() {
  },
  activated() {
    // this.drawImage();
  },
  methods: {
    drawImage() {
      var node = document.getElementById("my-node");
      domtoimage
        .toPng(node)
        .then((dataUrl) => {
          // var img = new Image();
          // img.src = dataUrl;
          this.imgUrl = dataUrl;
          // document.body.appendChild(img);
        })
        .catch(function (error) {
          console.error("oops, something went wrong!", error);
        });
    },
  },
};
script>

<style lang="scss" scoped>

style>

主要的方法：
domtoimage.toPng(…)：生成一个 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);
    });

domtoimage.toBlob(…)：将节点转化为二进制格式，生成一个 Blob 格式的 PNG 图片，可以直接将图片下载（此处的下载使用 FileSaver）

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

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

domtoimage.toSvg(…)：生成一个 base64编码格式的 SVG图片 ，并过滤掉其中的 元素

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

domtoimage.toPixelData(…)：以Uint8Array的形式获取原始像素数据，以Uint8Array 数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于WebGL中编写着色器颜色。

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 的  标签。

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

参考
dom-to-image