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

本文介绍如何使用html2canvas将DOM元素转换为图片,包括安装、使用方法及常见bug解决方案,如去除白色边框、处理跨域图片和防止DOM闪动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 安装

npm install html2canvas --save

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

2. 使用

<div class="imageWrapper" ref="imageWrapper">
    <img class="real_pic" :src="dataURL" />
    <slot></slot>
</div>

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的值就可以了,具体要多少,看情况设置即可。

### Vue2 中基于 URL 生成二维码并提供下载功能 #### 使用 `qrcodejs2` 库实现二维码生成功能 为了在 Vue2 项目中根据给定的 URL 动态生成二维码,并允许用户下载二维码图像,推荐使用经过修复版本的 `qrcodejs2-fix` 库[^4]。 安装依赖: ```bash npm install qrcodejs2-fix --save ``` 创建组件文件 `QrCodeGenerator.vue` 并引入必要的模块: ```javascript import QRCode from 'qrcodejs2-fix'; export default { data() { return { qrUrl: '', qrCanvas: null, }; }, }; ``` 模板部分定义输入框按钮用于触发二维码生成操作以及显示区域: ```html <template> <div class="qr-code-generator"> <!-- 输入链接 --> <input v-model="qrUrl" placeholder="请输入要转换成二维码的文字或网址"/> <!-- 显示区 --> <div id="qrcode"></div> <!-- 下载按钮 --> <button @click="downloadQR">点击下载</button> </div> </template> ``` 初始化时设置监听器,在每次修改 URL 后重新渲染二维码: ```javascript mounted(){ this.$nextTick(() => { this.generateQR(); }); }, watch:{ qrUrl(newVal){ if (newVal.length > 0) { this.generateQR(); } } } ``` 编写核心函数完成二维码绘制到页面上: ```javascript methods: { generateQR(){ let el = document.getElementById('qrcode'); // 清除旧有内容以防重复叠加 while(el.firstChild){ el.removeChild(el.lastChild); } new QRCode(el, { text: this.qrUrl || '', width : 150, height : 150 , colorDark : "#000", colorLight : "#fff" }); const canvas = el.querySelector('canvas'); this.qrCanvas = canvas; }, downloadQR(){ var link=document.createElementNS("http://www.w3.org/1999/xhtml","a"); link.href=this.qrCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); link.download='qrcode.png'; if(navigator.msSaveBlob){ // IE兼容处理 navigator.msSaveBlob(this.qrCanvas.msToBlob(),link.download); }else{ link.dispatchEvent(new MouseEvent('click')); } } } ``` 上述代码实现了当用户改变输入框内的文本或者点击下载按钮时自动更新界面上呈现出来的二维码图案及其对应的可下载 PNG 文件[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值