Q:实现根据地址生成二维码并将图片下载:
下载qrcode
npm install qrcode
组件引入
import QRCode from 'qrcode'
相关函数调用
<div class="testclass" ref="test" id="test"></div>
※ 注意每次生成新的以前需要清空上次的二维码内容
document.getElementById("test").innerHTML = ''
var qrcode = new QRCode(this.$refs.test, {
text: "https://xxxx.com",
width: 200,//二维码宽度
height: 200,//二维码高度
colorDark: "#000000",//前景色
colorLight: "#ffffff",//背景色
correctLevel: QRCode.CorrectLevel.H//二维码 容错级别
});
下载html2canvas
npm install --save html2canvas
组件引入
import html2canvas from "html2canvas"
相关函数调用
<div class="test2class" ref="test2" id="test2">
※注意: html2canvas是相当于截屏,所以当div设为hidden的时候下载下来的图片的空白或者图裂的情况
html2canvas(document.getElementById('test2')).then(canvas => {
let dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var saveLink = document.createElement('a');//临时创建二维码
saveLink.href = dataURL;//二维码下载路径
saveLink.download = "二维码下载.png"//二维码名。传进来的
saveLink.click();//模拟点击 执行下载
});
相关资料来源: