其实还是有这一些问题的存在，比如清晰度，比如文字尺寸上会有偏移等等，但是兼容性还是不错的，之前搜开源的代码在gitee上看到有人自己写的canvas将dom生成图片，大致思路如下:
- 获取要生成的dom节点
- 对dom树递归出所有的节点依次将宽高字体大小等等一系列参数渲染到canvas上
- 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);
});
