标签：vue img image 生成 二维码 let blob qrcodeVue

生成二维码效果

前言

安装

npm install --save qrcode.vue # yarn add qrcode-vue

一、使用步骤

1.引入

//引用组件
<qrcode-vue
	id="qrcodeBox" 
	:size="qrcodeVue.size"
	:value="qrcodeVue.value"
	:logo="qrcodeVue.logo"
	:bgColor="qrcodeVue.bgColor"
	:fgColor="qrcodeVue.fgColor"
></qrcode-vue>

2.功能

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();
      }
    },
}

总结

最重要的就是不要去看远方模糊的，而要做手边清楚的事.多看点,多学点,总不会有错.

标签：vue,img,image,生成,二维码,let,blob,qrcodeVue
来源： https://blog.csdn.net/qq_45729353/article/details/120364536

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。