vue 生成带logo的二维码 qrcode-vue 支持下载图片 实例详解
最近的项目上有个需求,生成带logo的二维码,网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用,翻阅了大量资料后,我找到了qrcode-vue这款基于vue的生成二维码的插件,非常好用,分享给大家。官网地址点击进入:qrcode-vue安装组件npm install --save qrcode.vue # yarn add qrcode.vuehtml部分...
·
最近的项目上有个需求,生成带logo的二维码,网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用,翻阅了大量资料后,我找到了qrcode-vue这款基于vue的生成二维码的插件,非常好用,分享给大家。官网地址点击进入:qrcode-vue
由于某些原因,我把相关参数,和备注再用红笔标出,望各位遇到问题动手去操作尝试一下,认真仔细的好好看看文章。
安装组件
npm安装
npm install --save qrcode-vue
html部分
//引用组件
<qrcode-vue
id="qrcodeBox"
:size="qrcodeVue.size"
:value="qrcodeVue.value"
:logo="qrcodeVue.logo"
:bgColor="qrcodeVue.bgColor"
:fgColor="qrcodeVue.fgColor"
></qrcode-vue>
js部分
import qrcodeVue from "qrcode-vue";
components: {
qrcodeVue
},
data() {
return {
qrcodeVue: {
size: 250,
bgColor: "#fff",
fgColor: "#000",
value: "https://www.baidu.com/", //二维码地址
logo: require("@/assets/images/qrLogo.jpg") //logo图片
}
}
}
methods: {
//生成二维码
getQRcode() {
this.qrcodeVue.value = "www.baidu.com"; // 二维码内容
},
//下载图片
downsQRcode() {
//找到canvas标签
let myCanvas = document.getElementById("qrcodeBox").getElementsByTagName("canvas");
let img = document
.getElementById("qrcodeBox")
.getElementsByTagName("img");
// // //创建一个a标签节点
let a = document.createElement("a");
// //设置a标签的href属性(将canvas变成png图片)
let imgURL = myCanvas[0].toDataURL("image/jpg");
let ua = navigator.userAgent;
if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) {
// IE内核 并且 windows系统 情况下 才执行;
var bstr = atob(imgURL.split(",")[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, "商品二维码" + "." + "png");
} else if (ua.indexOf("Firefox") > -1) {
//火狐兼容下载
let blob = this.base64ToBlob(imgURL); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
a.download = " "; //下载图片名称,如果填内容识别不到,下载为未知文件,所以我这里就不填为空
a.href = URL.createObjectURL(blob);
a.dispatchEvent(
new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
})
); //兼容火狐
} else {
//谷歌兼容下载
img.src = myCanvas[0].toDataURL("image/jpg");
// a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
a.href = img.src;
//设置下载文件的名字
a.download = "商品二维码";
//点击
a.click();
}
},
}
大功告成
更多推荐
已为社区贡献16条内容
所有评论(0)