vue中dom节点转图片

Posted 2021-06-08 blackAge

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

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

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中编写着色器颜色。

domtoimage 主要的属性有：

filter ： 过滤器节点中默写不需要的节点；

bgcolor ： 图片背景颜色；

height, width ： 图片宽高；

style ：传入节点的样式，可以是任何有效的样式；

quality ： 图片的质量，也就是清晰度；

cacheBust ： 将时间戳加入到图片的url中，相当于添加新的图片；

imagePlaceholder ： 图片生成失败时，在图片上面的提示，相当于img标签的alt；

评价自己

这个的话相对简单一点没有出现错位的图，我因为那个没有解决所以就换了一种方法，不是我不解决，我那个看了一天实在是我菜，然后没解决，没办法只能想其他方法，这个办法相对比较好，通俗易懂