小程序中 使用canvas 生成推广图片——wepy框架

现在小程序不能直接分享到朋友圈，所以另辟蹊径的有了生成 ‘推广图’ 让用户分享到朋友圈的方式就出来了。使用canvas 进行绘图的时候 主要用了 ctx.drawImage() API进行绘画，但是ctx.drawImage()只支持 本地形式的图片， 所以我们要先将网络图片转化成 本地图片

1.将网络图片转化成本地图片

wx.downloadFile({
     url: 'https://image.snaily.com.cn/erweima.png',       // 注意图片的域名
     success: (res) => {
       if (res.statusCode === 200) {
         console.log('缓存到本地路径地址')
         console.log(res.tempFilePath)
         this.shareTempFilePath = res.tempFilePath
         this.$apply()
       }
     }
 })

2. 将图片绘制到 canvas 上

const ctx = wx.createCanvasContext('shareCanvas')
ctx.drawImage(this.tempFilePath, 0, 0, 280, 350)
ctx.stroke()
ctx.draw()

3.将图片保存到本地

wx.getImageInfo({
    src: this.shareTempFilePath,
    success: (ret) => {
      var path = ret.path
      wx.saveImageToPhotosAlbum({
        filePath: path,
        success(result) {
          console.log(result)
          this.canvasHide = false
          this.$apply()
          wx.showToast({
            title: '保存成功',
            icon: 'none'
          })
        }
      })
    }
})

4. 微信管理平台配置 downloadFile的域名
   
   用红色框框标出来的 就是你在微信管理后台 需要配置的域名。如果不配置的话，即使你将网络图片转化成本地图片拿到链接 也放不上去的。坑了我一天