关于微信小程序使用canvas生成图片，内容图片跨域的问题

最近有个项目是保存为名片（图片），让用户发送给朋友或朋友圈，找了很多方案都不适用，绞尽脑汁之后还是选了使用canvas，但是用这玩意儿生成图片最大的缺点就是，如果你的内容中有图片，并且这个图片是通过外链链接进来的，那么很容易造成跨域而无法生成图片的问题，以下就是我解决该问题的办法：

*提前说一句，在做这个功能的时候，我发现跨域的问题没法解决，唯一能做的就是把图片放到和canvas相同的域里

1，以下是微信小程序的wxml文件部分

<canvas canvas-id='share' width="200" height="200" style="width:200px;height:200px;"></canvas>
<button bindtap='save2img'>保存图片</button>

2，以下是微信小程序的js部分代码

save2img: function() {
    wx.showLoading({
      title: '图片保存中...',
    })
    let image = 'http://www.baidu.com/source.jpg';//图片地址
    let filePath = '';
    wx.downloadFile({//将图片保存为本地临时文件
      url: image,
      success(res) {
        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
        if (res.statusCode === 200) {
          const ctx = wx.createCanvasContext('share')//创建画布
          ctx.drawImage(res.tempFilePath, 0, 0, 200, 200)//将临时文件渲染到画布上
          ctx.restore()
          ctx.save()
          ctx.draw(false, () => {
            // 生成图片
            wx.canvasToTempFilePath({
              canvasId: 'share',
              success: res => {
                //画板路径保存成功后，调用方法吧图片保存到用户相册
                wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  //保存成功失败之后，都要隐藏画板，否则影响界面显示。
                  success: (res) => {
                    console.log(res)
                    wx.hideLoading()
                  },
                  fail: (err) => {
                    console.log(err)
                    wx.hideLoading()
                  }
                })
              }
            })
          })
        }
      }
    })
  },