微信小程序用canvas生成分享图片，微信朋友圈海报

由于小程序上的限制，目前很多线上小程序要通过生成分享图片，没有长按识别图中二维码功能的阉割，最后得保存到相册然后来分享给用户…
小程序的canvas画布绘图与h5的canvas有类似的功能，应用场景大多数是用于制作分享图，模块上有：文字、图片、图形等等变量时，因为只有图片才能保存到相册，所以得先把这些模块合成为一张图片，此时canvas就能显示它的强大功能了。

具体可查阅官方小程序[canvas组件的api]的使用；

注意事项：

• canvas生成图片，cit.draw()完毕后，要wx.canvasToTempFilePath 保存图为临时地址才行的哦…
• 我现在用的图是本地资源的，若你的图片用的是网络资源先 wx.getImageInfo，否则你的图片无法显示。
• 图片为网络资源请用真机测试喲~

本案例还增加了切换卡片的功能，可忽略，不过这里配合了canvas的操作，也可以参考一下；
先看效果图：
(个人设计），按个人的需求来吧，基本上一张图都会有以下的模块内容…

生成的图片(下面的我手机保存出来的的图片，是非常清晰的)
不同手机的像素密度是不一样的，所以生成时要注意 *[屏幕像素密度]，防止生成的图片是固定大小和模糊的…

js功能：

  //canvas画图
  drawCanvas(e) {
    let that = this;
    /* 创建 canvas 画布 */
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(that.data.cardImgSrc, 0, 0, that.data.width, that.data.imgHeight)
    ctx.rect(0, that.data.imgHeight, that.data.width, that.data.height - that.data.imgHeight)
    ctx.setStrokeStyle('#ffffff')
    ctx.setFillStyle('#ffffff')
    ctx.fill()
    ctx.drawImage(that.data.xcxEwm, that.data.ewmLeft, that.data.ewmTop, that.data.ewmWidth, that.data.ewmWidth)
    ctx.setFillStyle('#333')
    ctx.setFontSize(12)
    ctx.setTextAlign('left')
    ctx.fillText('我是' + that.data.userInfo['nickName'] + '', that.data.pdWidth, that.data.pt1)
    ctx.setFontSize(11)
    ctx.fillText('邀请你和我一起旅行！', that.data.pdWidth, that.data.pt2)
    ctx.setFillStyle('#999')
    ctx.setFontSize(8)
    ctx.fillText('长按二维码，开启你的旅行之路', that.data.pdWidth, that.data.pt3)

    /* 绘制 */
    ctx.stroke()
    ctx.draw()

  },

  //将绘制后的canvas保存为图片
  canvasToPath() {
    let that = this;
    that.drawCanvas();
    //加个定时器，防止图为黑屏
    setTimeout(function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.width,
        height: that.data.height,
        destWidth: that.data.width * that.data.pixelRatio,     //乘以像素比，防止模糊
        destHeight: that.data.height * that.data.pixelRatio,
        canvasId: 'myCanvas',
        success(res) {
          console.log(res.tempFilePath)
          that.setData({
            poster: res.tempFilePath,
          })
          wx.nextTick(() => {
            that.saveCanvasImage();
          })
        }
      })
    }, .1e3);

  },

  // 保存图片方法
  saveCanvasImage() {
    let that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.poster,
      success: (res) => {
        console.log(res)
        wx.showToast({
          title: '保存成功'
        });
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },

  // 点击保存图片到相册（授权）
  saveImageToPhotos() {
    let that = this;
    // 相册授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.canvasToPath();
            },
            // 拒绝授权时，则进入手机设置页面，可进行授权设置
            fail() {
              console.log('拒绝授权');
              wx.showModal({
                title:'授权失败',
                content:'请允许”保存图片到相册“后，才可以把分享图保存到手机相册哦~',
                showCancel:false,
                success(res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success: (ret) => {
                        if(ret.authSetting['scope.writePhotosAlbum']){
                          that.canvasToPath();
                        }else{
                          //返回-回调
                          if (that.isCancleCallback){
                            that.isCancleCallback(ret);
                           }
                        }
                       }
                    })
                 }
                }
              })
            }
          })
        } else {
          // 已授权则直接进行保存图片
          that.canvasToPath();
        }
      },
      fail(res) {
        console.log(res);
      }
    })
  },

源码会持续更新到公众号，需要可以关注一下哦…