vue 生成二维码，及下载

1.  npm install -d  qrcode

2. 在页面中导入 import QRCode from "qrcode";

3. 页面html 结构 

    <canvas id="QRCode_header" > </canvas>

4.页面api 的使用

　　let opts = {

                errorCorrectionLevel: "H", //容错级别

                type: "image/png", //生成的二维码类型

                quality: 0.3, //二维码质量

                margin: 0, //二维码留白边距

                width: 180, //宽

                height: 180, //高

                text: this.text, //二维码内容

                color: {

                    dark: "#333333", //前景色

                    light: "#fff", //背景色

                },

            };

            let msg = document.getElementById("QRCode_header");

            let that = this;

            QRCode.toCanvas(msg, this.text, opts, function (error) {

                console.log(error);

                that.getBase64();

            });

 

5.  页面img  图片下载 ， 获取 canvas 的 base64码。

    　　let myCanvas = document.getElementById("QRCode_header");

           let imgURL = myCanvas.toDataURL("image/png");

 

6.生成  blob 。

   base64ToBlob(base64) {

            const parts = code.split(";base64,");

            const contentType = parts[0].split(":")[1];

            const raw = window.atob(parts[1]);

            const rawLength = raw.length;

            const uInt8Array = new Uint8Array(rawLength);

            for (let i = 0; i < rawLength; ++i) {

                uInt8Array[i] = raw.charCodeAt(i);

            }

            return new Blob([uInt8Array], { type: contentType });

        },

 

 

7. 使用a 标签下载

 　　　　　 let imgURL = this.bese64;

            　　const blob = this.base64ToBlob(imgURL);

 　　　　　const link = document.createElement("a");

                    link.href = window.URL.createObjectURL(blob);

                    link.download = "QRcode";

                    document.body.appendChild(link);

                    const evt = document.createEvent("MouseEvents");

                    evt.initEvent("click", false, false);

                    link.dispatchEvent(evt);

                    document.body.removeChild(link);

8. 注意，uc 不支持 base64 图片使用a 标签下载

　　可以做成用base64 码，在 img标签上面显示

　　提示用户，长按保存图片