其实还是有这一些问题的存在，比如清晰度，比如文字尺寸上会有偏移等等，但是兼容性还是不错的，之前搜开源的代码在gitee上看到有人自己写的canvas将dom生成图片，大致思路如下:

1. 获取要生成的dom节点
2. 对dom树递归出所有的节点依次将宽高字体大小等等一系列参数渲染到canvas上
3. canvas生成图片

但是，有好多细节需要处理，正在开发的一个模块只有短短的3天时间，还要敲代码要去屡一些业务上的需求，所以就重复造轮子了，记录一下这个插件。

使用时候请注意你生成的图片比例，图片模糊的情况下可以将图片比例的2倍甚至更高的倍数去生成，当时遇到的问题是模糊。文字偏移的问题应该rem与dom生成的这段时间组件已经执行的缘故，所以要做一些延迟处理，下方我并没有写使用时候根据具体情况扩展，这个插件对css3一些属性兼容不是很好，还有些样式没有兼容所以尽量降低复杂度，当然如果不着急的情况下也可以自己写一个，造一个自己的轮子。

安装方式

yarn add html2canvas

或

npm i html2canvas -S

使用方式
我是在vue2.x中使用的，是一个移动端的项目。在使用的组件中引入组件。

import html2canvas from "html2canvas";

html

<div id="finishProve">xxx</div>
<img :src="doMtoImgUrl"/>

js
把下面这个放到方法里 需要是时执行即可

var ops = {
    width: document.getElementById("finishProve").offsetWidth,
    height: document.getElementById("finishProve").offsetHeight,
    useCORS: true,
    allowTaint: false
  };

  var self = this;
  var node = document.getElementById("finishProve");
  html2canvas(node, ops)
    .then(canvas => {
      self.doMtoImgUrl = canvas.toDataURL("image/png");
    })
    .catch(function(error) {
      console.error("图片生成失败!", error);
    });