QRcode.js的二维码支持在移动端长按扫码和保存到手机相册

公司的项目是前后端分离,

后台框架是laravel,

前台拿数据,是通过编写接口从后台拿数据,

再通过前台vue进行拿值,

先看接口方面的读数据:

$id = $params['id'];
        //商户信息内容
        $data = User::select('name','mobile')->where('id',$id)->first();
        //商户对应二维码(后台的二维码图片是通过qrcode生成的链接拼接商户的手机号字段)
        $code = env('APP_URL') . '/pay?u=' . $data->mobile;

接口方面已经拿到了数据,接下里是前端vue从接口拿值:

mounted() {
            var _self = this;
            axios.post('/api/v1', api_data_sign(post_data, 'mrf'))
                .then(function (response) {
                    var data = response.data;
//                    console.log(data)
                    if (data.code == 200) {
                        _self.name = data.data.name;
                        _self.code = data.model;
                        $qrcode = $("#qrcode");
                        $qrcode.qrcode(data.model);
                    }

                }).catch(function (error) {
                 console.log(error);
            });
        },

html代码方面接收vue的拿到的值

 <div id="qrcode" class="img-thumbnail"></div>

好了,这样就拿到了.页面也能成功渲染出来,效果如下:

原本以为这样就结束了,项目上线,发现一个问题,二维码长按,无法跳出扫码和保存的按钮,F12审查元素

发现二维码是渲染在canvas上的,所以是无法跳出我们想要的按钮.

所以必须把渲染的二维码放到img中才能执行这些功能,

所以我把原本的jquery.qrcode.min.js 换成了qrcode.js

接下来修改vue部分的拿值,修改后的代码如下

mounted() {
            var _self = this;
            axios.post('/api/v1', api_data_sign(post_data, 'mrf'))
                .then(function (response) {
                    var data = response.data;
//                    console.log(data)
                    if (data.code == 200) {
                        _self.name = data.data.name;
                        _self.code = data.model;
                        var url = data.model;//将二维码的值放进变量
                        var qrcode = new QRCode(document.getElementById("qrcode"),{
                            width:220,
                            height:220
                        });//定宽高,调用QRCode方法
                        qrcode.makeCode(url);
                    }

                }).catch(function (error) {
                 console.log(error);
            });

到这里就结束了,再按下F12,发现已经将二维码放到img中,转成base64的图片了

再放到线上测试,完全可以跳出扫码识别的按钮和保存图片到相册的按钮.

下面附上JS文件下载位置:https://download.csdn.net/download/zhangzeshan/10645733

QRcode.js的二维码支持在移动端长按扫码和保存到手机相册

猜你喜欢