Vue使用html2Canvas和canvas2Image下载二维码会模糊的问题解决方法

ゝ一世哀愁。 2022-04-03 04:24 1409阅读 0赞

### 1. 安装 ###

npm install html2canvas --save

现在最新的版本应该是1.0.0，另外还有一个比较经典的版本是0.5.0，网上有许多关于这个版本的bug说明。

### 2. 使用 ###

slot里面是你需要转化为图片的DOM元素。

data() {
        return {
            dataURL: ''
        }
    },

dataURL是最后转化出来的图片base64地址，放在img标签中即可展示。

methods: \{

toImage() {
        html2canvas(this.$refs.imageWrapper,{
            backgroundColor: null
        }).then((canvas) => {
            let dataURL = canvas.toDataURL("image/png");
            this.dataURL = dataURL;
        });
    }

html2canvas的用法非常简单，不过1.0.0已经将写法改为了promise，在.then方法里获取canvas对象。

### 3.常见bug ###

1. 生成出来的图片有白色边框

在配置项里配置backgroundColor: null即可。

2. 有图片显示不出来并有报错（一般是跨域的错）

这是最常见的一个bug，就是这个插件无法生成跨域了的图片，也看了官方文档配置了也百度了都没有好的办法，最后是让后端直接把跨域的图片转成base64，就完美解决了这个问题。

3. 生成图片后会在原始DOM上覆盖而产生一个闪动的效果

先让生成的图片隐藏，等生成好以后再展示。（没有在手机上测试，效果不一定令人满意）

### 4.经典版本(0.5.0)常见bug ###

1.生成的图片模糊  
2.有跨域图片导致生成的图片不完整

这两个问题网上百度都有很多解决办法

3、生成出来的图片模糊

// 下载二维码图片的方法
    saveImg() {
       var self = this;
       html2canvas(document.querySelector(".savePic"), {
         scale: 5 // 缩放比例，默认是1
       }).then(function(canvas) {
         Canvas2Image.saveAsPNG(canvas, 400, 500, self.showName);
       });
     },

因为默认.savePic的大小并没有400x500，所以生成的图片比较模糊。为了提高清晰度，在html2canvas里面设置scale的值就可以了，具体要多少，看情况设置即可。

![20181220144751461][]

[20181220144751461]: /images/20220403/66f516cd91e741f0ad4b85c351ee6a0f.png