关于微信小程序中链接使用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)    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