小程序canvasToTempFilePath获取的图片地址在真机不显示？？？

开发工具测试图：

真机测试图：

从上面的两个图可以发现在真机上是http://tmp/...类型的图片，在真机上是wxfile://tmp/...类型的图片，所以无法显示。那么如果要直接使用这个图片该咋办呢？？？

重点来了！！！

使用wx.canvasGetImageData获取 canvas 区域隐含的像素数据。然后将获取的像素数据通过wx.arrayBufferToBase64 转成base64就可以直接在真机上使用了,各位小伙伴可以参照下面的代码实现哦。

<view class="container">
  <canvas style="width: 300px; height: 200px;" class="myCanvas" canvas-id="firstCanvas"></canvas>
  <text class="text">{{img}}</text>
  <!-- 如果要在真机打印或者在text中显示canvasToTempFilePath获取到的地址请注释掉下面这一句，不然你啥都看不到 -->
  <image class="img" src="{{img}}"></image>
</view>

注意！！：必须有UPNG.js，点我获取UPNG.js

//index.js
//获取应用实例
var upng = require('../../utils/UPNG.js');
const app = getApp();

Page({
  data: {
    img:''
  },

  onLoad: function() {

  },
  canvasIdErrorCallback: function(e) {
    console.error(e.detail.errMsg)
  },
  onReady: function(e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas');
    const platform = wx.getSystemInfoSync().platform;
    const that=this;
    context.setStrokeStyle("#333333");
    context.setFillStyle("#FFFF00");

    //  绘制大圆脸
    context.moveTo(210, 100);
    context.arc(150, 100, 60, 0, 2 * Math.PI, true);
    context.fill();

    // 绘制嘴巴
    context.moveTo(190, 100);
    context.arc(150, 100, 40, 0, Math.PI, false);
    context.stroke();

    // 绘制左眼
    context.moveTo(125, 80);
    context.arc(120, 80, 5, 0, 2 * Math.PI, true);
    context.stroke();

    // 绘制右眼
    context.moveTo(185, 80);
    context.arc(180, 80, 5, 0, 2 * Math.PI, true);
    context.stroke();

    context.draw();

    setTimeout(function(){
      wx.canvasGetImageData({
        canvasId: 'firstCanvas',
        x: 0,
        y: 0,
        width: 250,
        height: 250,
        success (res) {
          // console.log(res)
          let pngData = upng.encode([res.data.buffer], res.width, res.height);
          let bs64 = wx.arrayBufferToBase64(pngData);
          that.setData({
            img: 'data:image/jgp;base64,' + bs64
          }, () => {
            console.log(that.data.img)
          })
          // console.log(bs64)
        }
      })
      // wx.canvasToTempFilePath({
      //   canvasId:'firstCanvas',
      //   success(res){
      //     console.log(res.tempFilePath)
      //     that.setData({
      //       img: res.tempFilePath
      //     },()=>{
      //       console.log(res.tempFilePath)
      //     })
      //   }
      // })
    })
  }
})