微信小程序的自定义组件中使用canvas在真机上不显示绘制内容

Question

问题描述

小程序的自定义组件我使用了canvas绘制，在开发工具上可以显示canvas绘制的内容，但是在真机上不显示，而在真机上打开调试又可以显示，是什么原因？。

相关代码

如下：
methods: {

openfun() {
  let that= this;
  wx.downloadFile({
    url: that.data.avatarUrl,
    success: function (res) {
      // console.log(res.tempFilePath);
      that.setData({
        avatarUrl:res.tempFilePath,
      })
      //绘图方法
      that.drawImage();

    }, fail: function (fres) {

    }
  })
},
drawImage:function() {
  //绘制canvas图片
  var that = this
  const ctx = wx.createCanvasContext('sharePhoto',this)
  // console.log(wx.getSystemInfoSync())
  var Width = wx.getSystemInfoSync().windowWidth*0.74
  var Height = wx.getSystemInfoSync().windowHeight * 0.68
  var bgPath = '/pages/images/nimg557_1.jpg'
  var bgPath2 = '/pages/images/nimg456_1.png'
  var avatarUrl = that.data.avatarUrl
  //绘制图片
  ctx.drawImage(bgPath, 0, 0, Width, Height)
  ctx.drawImage(bgPath2, Width * 0.0897, Height*0.175, Width*0.818, Height*0.758)
  ctx.save();
  ctx.beginPath();
  ctx.arc(Width * 0.5, Height * 0.175, Width * 0.098, 0, 2 * Math.PI);
  ctx.clip();//画了圆 再剪切
  ctx.drawImage(avatarUrl, Width * 0.4, Height * 0.109, Width*0.197, Height*0.132)
  ctx.restore();
  ctx.textAlign = "center";
  ctx.font = "16rpx Arial";
  ctx.fillStyle = "#333";
  ctx.fillText(that.data.nickName, Width * 0.5, Height * 0.293, Width * 0.818);
  ctx.save();
  ctx.draw()
},

你期待的结果是什么？实际看到的错误信息又是什么？

请问有没有大神知道的？

Answer 1

你的控制台有没有报错呢，下载的图片域名有加入白名单吗？

Answer 2

就是url路径未在白名单问题，你绘制用户头像，需要把微信官方的域名配置到域名白名单。

Answer 3

也想知道答案是啥~