(wepy框架) 微信中 使用 canvas 绘制多张网络图片到 canvas 中

公司小程序 推广图大概是这样的

整张 canvas 主要涉及几个部分， 背景图（包括二维码啊之类的）、用户头像（接口自己抓取的）、用户名称、来到蜗牛英语的天数、写了多少篇手记、写了大概多少字。
步骤：

1. 在 template 写入canvas 标签

<canvas  class="ShareImg" style="width: 270px; height: 450px;" canvas-id="shareCanvas" wx:if="{{canvasHide}}"></canvas>

2. 使用 wx.downloadFile() 将网络图片转换成本地图片

因为 ctx.drawImage(url, X, Y, width, height) 中的 url 只接受本地图片的链接，所以需要通过 wx.downloadFile() 将网络图片转换成本地图片 （这里一定要在微信管理后台进行域名配置， 后台里面有一个 downloadUrl ,例如你用的图片的域名是 https://image.sngin.com.cn 那么 你后台就要配置这个，要不然你画不上去）

wx.downloadFile({
  url: this.profileAvatar,
  success: (res) => {
    if (res.statusCode === 200) {
      this.AvatarPath = res.tempFilePath
      this.$apply()
    }
  }
})

解释一下: this.profileAvatar 是我在个人中心获取完用户信息 保存在这个字段里面的。 this.$apply() 是在使用 wepy 框架中独有的方法，主要是处理一些 异步请求之后 信息赋值给不上的问题。
这样 我们就拿到了 第一张 由 网络——>本地 之间的转换，并且放到了 this.AvatarPath 这个变量中。下面就开始绘图
**

3. 点击 ‘保存本地’ 按钮 触发 一个叫做 ‘storeImgToLocal’ 的方法

**
（我这里就当你熟练掌握 wepy了）

wx.downloadFile({
  url: 'https://image.snaily.com.cn/canvasNew.png',
  success: (res) => {
    if (res.statusCode === 200) {
      const ctx = wx.createCanvasContext('shareCanvas')
      ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
      ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
      ctx.stroke()
      ctx.draw()
    }
  }
})

在这里的 ’ https://image.snaily.com.cn/canvasNew.png ’ 是我们的背景图片， 因为我这个 推荐图 就两张图片 所以我就这么先写了，如果你那里有很多的话，可以将他们放到一个数组中，将 上面第一个代码块 封装成一个函数， 通过循环数组来调函数，可以将他们都转化成 本地图片， 然后在通过 ctx.drawImg(url, X, Y, Width, Height) 来将他们绘到 canvas 上。
现在两张图片已经绘制到上面了， 接下来就要把文字绘上去。

wx.downloadFile({
  url: 'https://image.snaily.com.cn/canvasNew.png',
  success: (res) => {
    if (res.statusCode === 200) {
      const ctx = wx.createCanvasContext('shareCanvas')
      ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
      ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
      ctx.setFontSize(18)
      ctx.fillText(this.groupName + '的成就墙', 71, 76)
      ctx.setFontSize(10)
      ctx.fillText('来到蜗牛的第' + this.fromDays, 83, 95)
      ctx.setFontSize(10)
      ctx.fillText('共写' + this.writeDiarys + '篇亲子成长手记', 83, 109)
      ctx.setFontSize(10)
      ctx.fillText('累计' + this.words + '字', 83, 124)
      ctx.stroke()
      ctx.draw()
    }
  }
})

在每一个 ctx.fillText(文字, X, Y) 的前面加一个 ctx.setFontSize(size) 就可以控制他的文字大小了。

4.将 绘制 好的canvas 转变成图片 并 保存到一个变量中

wx.downloadFile({
  url: 'https://image.snaily.com.cn/canvasNew.png',
  success: (res) => {
    if (res.statusCode === 200) {
      const ctx = wx.createCanvasContext('shareCanvas')
      ctx.drawImage(res.tempFilePath, 0, 0, 270, 450)
      ctx.drawImage(this.AvatarPath, 5, 30, 51, 51)
      ctx.setFontSize(18)
      ctx.fillText(this.groupName + '的成就墙', 71, 76)
      ctx.setFontSize(10)
      ctx.fillText('来到蜗牛的第' + this.fromDays, 83, 95)
      ctx.setFontSize(10)
      ctx.fillText('共写' + this.writeDiarys + '篇亲子成长手记', 83, 109)
      ctx.setFontSize(10)
      ctx.fillText('累计' + this.words + '字', 83, 124)
      ctx.stroke()
      ctx.draw()
      wx.hideLoading()
      setTimeout(() => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          canvasId: 'shareCanvas',
          success: (res) => {
            console.log('临时路径')
            console.log(res.tempFilePath)
            this.storeImgPath = res.tempFilePath
            this.$apply()
          }
        })
      }, 1200)
    }
  }
})

解释一下: 后面使用 setTimeout 主要是想起到一个 异步的作用， 因为有的时候他可能没那么及时绘制出来，所以给一个异步确保一下，这里也可以使用 Promise的 .then((res) => {}) 去处理 更方便一些，但是目前我这个也可以运行的。
现在 我们已经把canvas 转变成 图片 并 将地址保存在 this.storeImgPath 中。 接下来就是 调 保存到本地的API

wx.getSetting({
   success: (res) => {
     if (!res.authSetting['scope.writePhotosAlbum']) {
       wx.authorize({
         scope: 'scope.writePhotosAlbum',
         success: () => {
           console.log('授权了')
           wx.saveImageToPhotosAlbum({
             filePath: this.storeImgPath,
             success: (res) => {
               console.log(res)
               console.log('保存成功')
               wx.showToast({
                 title: '分享图已经保存到您的相册了哦~',
                 icon: 'none'
               })
             }
           })
         }
       })
     } else {
       console.log('已经授过权了')
       console.log(this.storeImgPath)
       wx.saveImageToPhotosAlbum({
         filePath: this.storeImgPath,
         success: (res) => {
           console.log(res)
           wx.showToast({
             title: '分享图已经保存到您的相册了哦~',
             icon: 'none'
           })
         }
       })
     }
   }
 })

主要思想就是。 先判断用户 对这个 scope.writePhotosAlbum 是否进行过授权， 如果没有授权需要用户先进行授权， 如果已经授权过了 可以直接 调用 ‘wx.saveImageToPhotosAlbum’ 将我们 已经生成图片的地址 给它就 OK 了