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

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

首先我使用的是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: "返回"
            })
          }
      }
      }
    })
  },