vue dom转图片解决方案

最近遇到一个需求，需要将低代码组合成的 h5页面生成宣传图
思路将html转为canvas 通过api生成图片

参考了以下三个插件

1.html2canvas插件

安装：npm install --save html2canvas

然后在指定的位置引入

使用：

options:{
allowTaint: true, //允许污染
taintTest: true, //在渲染前测试图片
// useCORS: true, //开启跨域配置，但和allowTaint不能共存
}
html2canvas(this.$refs['ref-qr-code'], this.options).then(canvas => { // ref-image-wrapper转换图片的dom
                const _dataURL = canvas.toDataURL('image/png');
                this.imgUrl = _dataURL;
                // 回调创建a链接下载图片
                const _link = document.createElement('a');
                _link.href = this.imgUrl;
                _link.download = 'colorCard'; //指定图片下载名字
                document.body.appendChild(_link);
                _link.click();
                document.body.removeChild(_link);
       
            });

注意点

1、这个里面一些css样式是不支持的，然后出现空白啥的就更换css样式，如果图片超过一个屏幕的高度，需要加上 window.scroll(0,0)
2、document.documentElement.style.overflow = ‘hidden’; // 防止有滚动条造成图片有 x偏移
document.documentElement.style.overflow = ‘’; // 释放滚动条
3、指定的dom超出一屏 生成图片会截取 可视区域 ，解决办法 进行缩放
img.style.transform = “scale(0.4)”;

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

const _dom = document.getElementById('js-phone-image')
            const _x = _dom.offsetWidth * 4;
            const _y = _dom.offsetHeight * 4;
            domtoimage.toPng(_dom, {width:_x, height:_y})
                .then(dataUrl =>{
                    const a= document.createElement('a');
                    a.style.visibility = false;
                    a.download = `${this.drawerTitle}宣传图`;
                    a.href = dataUrl;
                    a.click();
                    this.$emit('success', dataUrl)
                }).catch( () =>{
                    this.$emit('error')
                })

3、domtoimage 主要的属性有：
filter ： 过滤器节点中默写不需要的节点；

bgcolor ： 图片背景颜色；

height, width ： 图片宽高；

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

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

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

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