关于微信小程序中链接使用canvas实时生成二维码使用保存至相册

微信小程序开发过程中,将链接生成实时更换的二维码

一个只会边缘OB的假前端,
       首先我使用的是QRcode.js,小程序官方提供了生成二维码的API,但是限制条件是生成小于10万张,在衡量后期维护,所以还是选用了插件进行生成,

微信小程序的开发其实非常像一种JS框架,引入外部JS插件,是按照现在主流的导入方式一样的,

将QRcode.js插件放入utils文件中,

然后在QRcode.js中进行暴露

module.exports = {
qrApi: api
}

在开发的文件中引入QRcode.js

var QR = require('../../utils/QRcode.js');
配置生成canvas的大小,这里的配置是根据原QRcode.js网站提供的

//适配不同屏幕大小的canvas
setCanvasSize: function () {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale =750 / 384;//不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width;//canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},

createQrCode: function (str, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
var ctx=wx.createCanvasContext(canvasId)
// save the default fill style

QR.qrApi.draw(str, canvasId, cavW, cavH);
},
onGenQrc: function (e) {
this.createQrCode(this.data.qrcStr, this.canvasId, this.size.w, this.size.h);
},

配置完成后修改二维码QRcode.js插件

QRcode.js这个插件中的不足之处有三点,

第一点:生成的二维码为透明色的,初次保存至相册后的是无法识别的二维码,

第二点:的是生成的二维码的图层层次在最高层,

第三点:就是没有进行完善的,生成的二维码是没有LOGO的

draw: function (str, canvas, cavW, cavH, ecc) {

ecclevel = ecc || ecclevel;
canvas = canvas || _canvas;
if (!canvas) {
console.warn('No canvas provided to draw QR code in!')
return;
}
var size =  Math.min(cavW, cavH);
str = this.utf16to8(str);//增加中文显示
console.log(str)
var frame = this.getFrame(str),
ctx = wx.createCanvasContext(canvas),
px = Math.round(size / (width + 8));
var roundedSize = px * (width + 8),
offset = Math.floor((size - roundedSize) / 2);
size = roundedSize;
ctx.setFillStyle("#000000")                            //生成带白色背景的二维码
ctx.clearRect(0, 0, cavW, cavW);
ctx.save()
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, 388, 388)
// restore to the previous saved state 194  97-24 73
ctx.restore()
for (var i = 0; i < width; i++) {
for (var j = 0; j < width; j++) {
if (frame[j * width + i]) {
ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
}
}
}
ctx.drawImage("./../img/logoRq.png", 73, 73, 48, 48)    //生成带LOGO的二维码   73,73 XY定位 48,48 width height
ctx.draw();
}
}
module.exports = {    //QRcode.js暴露文件
qrApi: api
}

})();

})(); 为QRcode.js 文件结尾

然后关于图层的问题的话,需要对应WXSS进行调整

然后进行生成二维码操作

在WXML中写入<canvas>

<view class="img-box" canvas-id="boxCanvas" style="z-index:1">
<canvas  bindtap="onPreviewQrc" style=" width:384rpx;height:384rpx;background:#ffffff;z-index:1" canvas-id="qrcCanvas"/>
</view>

在JS中导入canvas-id

在data{

canvasId:"qrcCanvas",

}

然后wx.request请求成功后,生成二维码

success: function (res) {
console.log(res)
if (res.data.respCode == "00000") {
that.data.qrcPhld = res.data.data.qrCodeUrl;//获取的路径赋值cancvas
that.setData({
qrcPhld: that.data.qrcPhld    //获取链接地址,覆盖原有数据
})
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 2000
});
var st = setTimeout(function () {
wx.hideToast() //关闭提示
var size = that.setCanvasSize(); //得到根据屏幕计算的二维码宽高
/*
size格式为
size{
w:100
h:100
}
*/
//绘制二维码
var size = that.setCanvasSize();//动态设置画布大小
that.createQrCode(that.data.qrcPhld, that.canvasId,size.w,size.h );
clearTimeout(st);
}, 2000)
}
},

接下来是保存按钮的操作,就调用微信的API接口即可

saveBtn: function () {
var that = this;
var RQsrc="";
console.log(that.data.qrcPhld
4000
)
wx.canvasToTempFilePath({
canvasId: "qrcCanvas",
success: function (res) {
RQsrc= res.tempFilePath;

},
fail: function (res) {
console.log(res);
}
});
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success(res) {
console.log(res)
// 用户已经同意小程序使用保存相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
if (wx.saveImageToPhotosAlbum) {
wx.saveImageToPhotosAlbum({
filePath: RQsrc,
success(res) {
console.log(res.errMsg);
wx.showModal({
title: '提示',
content: '已保存至相册',
showCancel: false,
confirmText: "返回"
})
},
fail: function (res) {
console.log(res.errMsg);
wx.showModal({
title: '提示',
content: '保存失败',
showCancel: false,
confirmText: "返回"
})
}
})
}else {
wx.showModal({
title: '提示',
content: '您的微信版本过低,请更新',
showCancel: false,
confirmText: "返回"
})
}
},
fail:function(err){
console.log(err)
}
})
}else{
if (wx.saveImageToPhotosAlbum) {
wx.saveImageToPhotosAlbum({
filePath: RQsrc,
success(res) {
console.log(res.errMsg);
wx.showModal({
title: '提示',
content: '已保存至相册',
showCancel: false,
confirmText: "返回"
})
},
fail: function (res) {
console.log(res.errMsg);
wx.showModal({
title: '提示',
content: '保存失败',
showCancel: false,
confirmText: "返回"
})
}
})
} else {
wx.showModal({
title: '提示',
content: '您的微信版本过低,请更新',
showCancel: false,
confirmText: "返回"
})
}
}
}
})
},

大佬们,不要B我,我很LWO