qrcodejs2二维码
Sonder
2021-10-10
1398字
3分钟
浏览 (3.4k)
//组件中使用
// 1.引入:
import QRCode from 'qrcodejs2'
//2.html结构
<div id="qrcode" ref="qrcode"></div>
//3.方法
qrcode(){
let qrcode = new QRCode('qrcode', {
width: 100,
height: 100, // 高度
text:sessionStorage.getItem('text'), // 二维码内容
render: 'canvas', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f',
// foreground: '#ff0'
});
},
//4.调用
//下载
//html
<a id="downloadImg"></a>
<button class="button" @click="downloadImg" title="下载">下载</button>
//方法
downloadImg(){
var img = document.getElementById('qrcode').getElementsByTagName('img')[0];
// 构建画布
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 构造url
var url = canvas.toDataURL('image/png');
document.getElementById('downloadImg').setAttribute('href', url);
document.getElementById('downloadImg').setAttribute('download', '邮箱+推荐二维码.jpg');
document.getElementById('downloadImg').click();
}