vue - 将页面url生成二维码（可以定义成对象再调用）1.2

目录

vue单页面调用

1、下载或者导入qrcode.js

2、页面scan icon image

3、scan实现方法

vue全局调用

1、引入依赖brower.js和qrcode.js

2、使用页面调用

效果gif

参考文章

---

在上一篇文章中我们可以实现了，将html页面变成图片，调用浏览器下载插件自动下载；

      

本篇中将要实现：

手机微信等扫一扫，然后在手机上面可以查看网页数据。

• vue单页面调用

1、下载或者导入qrcode.js

npm install --save qrcode

或者

 

2、页面scan icon image

3、scan实现方法

scan(dataUrl) {
        let img = document.getElementById('qr-img');
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        //用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
        QRCode.toCanvas(canvas,window.location.href , (error) => {// window.location.href
            if (error) {
                console.log(error);
                return;
            }

            if (dataUrl === '') {
                dataUrl = canvas.toDataURL("image/jpeg");// 点击第一次展开
            } else {
                dataUrl = ''; // 点击第二次收缩
            }
        })
        return dataUrl;
    }

• vue全局调用

在上一篇文章中已经告知如何变成对象调用，这里就不整个brower.js代码贴上去了，只会放新增的scan方法：

1、引入依赖brower.js和qrcode.js

brow.js内容

function scan(dataUrl) {
    let img = document.getElementById('qr-img');
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    //用 canvas 对象和邀请链接生成二维码，并将生成的二维码转为 base64
    QRCode.toCanvas(canvas, window.location.href, (error) = > { // window.location.href
        if (error) {
            console.log(error);
            return;
        }
 
        if (dataUrl === '') {
            dataUrl = canvas.toDataURL("image/jpeg"); // 点击第一次展开
        } else {
            dataUrl = ''; // 点击第二次收缩
        }
    })
    return dataUrl;
}
 
 
 
 
 
 
P.scan = function (dataUrl) {
    return scan(dataUrl)
};

2、使用页面调用

scan() {
    this.dataUrl = Brower().scan(this.dataUrl);
},

• 效果gif

 

• 参考文章

1. Vue 爬坑之旅 -- 生成分享二维码和合成分享海报的方法及踩坑历程