公司的项目是前后端分离,
后台框架是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上的,所以是无法跳出我们想要的按钮.
扫描二维码关注公众号,回复:
3762256 查看本文章
所以 必须把渲染的二维码放到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