vue中dom节点转图片

今天项目中有个需求，需要将页面的一部分转为图片，相当于存证之类的

然后我查阅了下百度，发现了几种可行的方法，特此来记录下

1.html2canvas插件

安装：npm install --save html2canvas

然后在指定的位置引入

使用：

html2canvas(this.$refs.imageDom, {
width: this.$refs.imageDom.clientWidth, //dom 原始宽度
height: this.$refs.imageDom.clientHeight,
allowTaint: true, //允许污染
taintTest: true, //在渲染前测试图片
// useCORS: true, //开启跨域配置，但和allowTaint不能共存
}.then(img => {

});

注意点

这个里面一些css样式是不支持的，然后出现空白啥的就更换css样式，如果图片超过一个屏幕的高度，需要加上 window.scroll(0,0)

这个项目是我接手的别人的项目，然后本地运行是没有问题的，然后上线之后就会出现图片偏移这个说法，这个项目用的是gulp打包，我至今没有解决，如果有其他大佬知道的话，麻烦告诉我一下

还有一些页面加载的时候可能页面没加载完成就生成了图片可以加一个定时器

2.dom-to-image

安装：npm install dom-to-image

在指定页面引入

这个使用的时候相当简单，有几个常用的api

domtoimage.toPng(...);将节点转化为png格式的图片

domtoimage.toJpeg(...);将节点转化为jpg格式的图片

domtoimage.toSvg(...);将节点转化为svg格式的图片，生成的图片的格式都是base64格式。

domtoimage.toBlob(...);将节点转化为二进制格式，这个可以直接将图片下载，是不是非常方便

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