小程序 wx.canvasToTempFilePath 工具正常显示图片真机不显示 填坑

小程序 wx.canvasToTempFilePath   工具正常显示图片真机不显示 填坑
项目上有个需求是要生成海报 发到朋友圈的

 

createImg(){
    var _this = this;
    var size = _this.setCanvasSize();
    var context = wx.createCanvasContext('myCanvas', this);
    var path = _this.data.image; //测试的图片
    var imageQrCode = _this.data.qrcode; //二维码
    console.log('createNewImg', path, imageQrCode);
    context.drawImage(path, 0, 0, size.w, size.h);
    
    context.drawImage(imageQrCode, 28, size.h - 90, 85, 85);
    this.settext(context);
    
    //绘制图片
    context.draw(false, _this.toimg);
},
toimg() {
    var _this = this;
    console.log('before save to canvas');
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      quality: 1,
      fileType: 'png',
      success: function (res) {

        wx.hideLoading({
          success: (res) => {},
        })
        console.log('image created', res);
        var tempFilePath = res.tempFilePath;
    }
    });
}

 

看看上面代码，看起来没什么不对的地方，
但是  真机上 真的不显示 图片 
因为 开发工具 上的 wx.canvasToTempFilePath 返回的是 一个 http 地址，真机的是 wxfile 开头的 临时文件

 

var path = _this.data.image; //测试的图片

var imageQrCode = _this.data.qrcode; //二维码

canvas 画图的时候 工具上是可以从云端后者是网上的一个地址作为图片源 画图的。但是 真机上就不行，查了好久 度娘 以后发现  小程序 里面的 canvas 是阉割的，好多功能都用不了的。还有一个就是
用来画图的图片源必须是本地的。所以如果用的是网上的资源的话 必须先把他下载到本地才能用
 

wx.downloadFile({
          url: img_url, //仅为示例，并非真实的资源
          success(res) {
            console.log('down res', res);
            self.setData({
              image: res.tempFilePath,
            });

          }
        });

才可以在真机上 看到用 canvas 画出来的 图片