小程序生成二维码并且保存分享

效果图

hidden 是用来隐藏显示图层的 prurl是生成出来的图片临时路径

data: { 
    prurl: '',
    hidden: true
    }

核心JS代码

getQr: function () {
    var that = this
    wx.showLoading({
      title: '生成二维码中...',
    })
    if (that.data.prurl != ''){
      that.setData({
        hidden: false
      })
      wx.hideLoading()
    }else{
      wx.request({
        url: app.globalData.url + '/wx/getQr/' + app.globalData.openId,
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          //  app.globalData.userQr = res.data;
          that.setData({
            userQr: res.data
          });
        }, complete: () => {
          wx.downloadFile({
            url: app.globalData.userInfo.avatarUrl,
            success: function (res1) {
              //缓存头像图片
              that.setData({
                portrait_temp: res1.tempFilePath
              })
            }, complete: () => {
              that.drawImage()
              wx.hideLoading()
            }
          })
        }
      }) 
    } 
    // wx.navigateTo({
    //   url: '../wxqr/wxqr'
    // }) 
  }, drawImage: function () {
    var that = this 
    const fsm = wx.getFileSystemManager();
    //传入二维码base64
    base64src(this.data.userQr).then(
      function (data) {
        const ctx = wx.createCanvasContext('img-canvas')
        // 底图
        ctx.drawImage('/image/tg.png', 0, 40, 307, 441)
        // 文字
        ctx.setTextAlign('center')    // 文字居中
        ctx.setFillStyle('#000000')  // 文字颜色：黑色
        ctx.setFontSize(18)         // 文字字号：22px
        ctx.fillText(that.data.user.name, 307 / 2, 120)
        // 文字
        ctx.setTextAlign('center')    // 文字居中
        ctx.setFillStyle('#D4D4D4')  // 文字颜色：黑色
        ctx.setFontSize(14)         // 文字字号：22px
        ctx.fillText('长按扫描小程序', 307 / 2, 400)
        // 小程序码
        const qrImgSize = 180
        //第一个数字是左边距 第二个参数上边距
        ctx.drawImage(data, (300 - qrImgSize) / 2, 180, qrImgSize, qrImgSize)
        //画圆的代码需要放在最后不然会导致其他代码无法执行 
        // 下面是先定位要开个圆形的位置，160 和 45 分别就是圆的圆心的 x 坐标和 y 坐标，40 是半径，后面的两个参数就是起始和结束，这样就能画好一个圆了
        ctx.arc(155, 45, 40, 0, 2 * Math.PI);
        ctx.closePath();
        // 下面就裁剪出一个圆形了 
        ctx.clip();
        //头像
        ctx.drawImage(that.data.portrait_temp, 115, 5, 80, 80)
        ctx.restore();
        ctx.stroke()

        ctx.draw(false, function () {
          //生成分享图
          wx.canvasToTempFilePath({
            canvasId: 'img-canvas',
            success: function (res) {
              console.info(res.tempFilePath)
              that.setData({
                prurl: res.tempFilePath,
                hidden: false
              })
            }
          })
        })
      }
    )
  },
  // 保存图片到本地
  saveCanvas: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) { 
              that.closeCanvas()
            }
          }
        })
      }
    })
  }, closeCanvas:function(){
    /* 该隐藏的隐藏 */
    this.setData({
      hidden: true
    })
  }

上面方法调用的一个base64的工具，如果小程序二维码可以有远程路径地址的话可以不需要。

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';

const base64src = function (base64data) {
  return new Promise((resolve, reject) => {
    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
    if (!format) {
      reject(new Error('ERROR_BASE64SRC_PARSE'));
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
    const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
      filePath,
      data: buffer,
      encoding: 'binary',
      success() {
        resolve(filePath);
      },
      fail() {
        reject(new Error('ERROR_BASE64SRC_WRITE'));
      },
    });
  });
};

export default base64src;

html代码

  <canvas canvas-id="img-canvas" class='canvas'></canvas>
  
      <!-- 预览分享图 这里就是上图展示的效果   -->
      <!-- 刚开始是隐藏的 生成分享图之后显示, 用一个布尔变量来控制 这里的样式大家看图就写出来了 -->
      <view hidden='{{hidden}}' class='preview' bindtap='cancel'>
        <image src='{{prurl}}' mode='widthFix'></image>
        <view>
        <button type='primary' size='mini' bindtap='saveCanvas'>保存分享</button>
        <button type='primary' size='mini' bindtap='closeCanvas'>关闭</button>
        </view>
      </view>