微信小程序前端生成二维码并保存（海报同理）

1.前端生成二维码并保存

1.下载weapp.qrcode.js文件并引入项目中
2.先在wxml文件中构建canvas画布
<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
3.直接引入 js 文件，使用 drawQrcode() 绘制二维码
let drawQrcode = require("../../utils/weapp.qrcode.js")

 drawQrcode({
        _this: this,//在开发过程中发现这边不加this二维码出不来
        width: 200,
        height: 200,
        canvasId: 'myQrcode',
        text: path, //二维码的路径
        image: {
          imageResource: '../../pages/images/ygbLogo.png',//二维码中图片的路劲
          dx: 60,
          dy: 60,
          dWidth: 80,
          dHeight: 80
        },
        callback: (e) => {
          // 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
          //我的华为mate20pro放1000才出的来
           setTimeout(() => {
           //此处调用下面第四点调用canvas转图片的方法
           },1000)
        }
})

4.将canvas转成图片

let that=this;
wx.canvasToTempFilePath({
     canvasId: 'shareCode',
     success: function (res) {
        that.setData({shareImg: res.tempFilePath})
     },
     fail: function (res) {
         wx.showToast({title: '图片生成失败'});
         console.log("图片生成失败error", res)
     }
}, this)

5.保存

   saveImg() {
      let that = this;
      // 获取用户是否开启用户授权相册
      wx.getSetting({
        success(res) {
          // 如果没有则获取授权
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
               that.saveSuccess()
              },
              fail() {
                // 如果用户拒绝过或没有授权，则再次打开授权窗口
                that.openPicture()
              }
            })
          } else {
            // 有则直接保存
           that.saveSuccess()
          }
        }
      })
    },
    //保存图片
    saveSuccess(){
     	wx.saveImageToPhotosAlbum({
            filePath: that.data.shareImg,
            success() { wx.showToast({ title: '保存成功'})},
            fail() {wx.showToast({ title: '保存失败'})}
        })
    },
    //打开授权窗口
    openPicture() {
      wx.showModal({
        title: '提示',
        content: '相册系统未授权，请重新授权并保存图片',
        confirmColor: '#1989fa',
        confirmText: '确定',
        success(res) {
          if (res.confirm) {
            wx.openSetting({
              success: (res) => {
                console.log('打开授权页')
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },

注：海报也是用canvas 绘制，海报上面如果需要使用到网络图片则需要调用wx.getImageInfo() api获取图片的临时路径。网络路径的域名需要配置在微信公众平台的downloadfile白名单下

getImageInfo(url) {
      return new Promise((resolve, reject) => {
        wx.getImageInfo({
          src: url,
          success(res) {
            console.log(res)
            resolve(res)
          },
          fail(res) {
            reject(res)
          }
        })
      })
    },