小程序canvasu真机上数据图片不能使用

canvas遇到的坑
1.文字换行
2.真机不能使用网络数据图片（真坑） 点击显示效果我就不写了，你们可以自己加一下

全部代码贴出来

   css

    #preview {
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.6);
          position: fixed;
          z-index: 999;
          top: 0;
          overflow: hidden;
          bottom: 0;
    }

    #preview button {
          width: 43%;
          position: absolute;
          bottom: 218rpx;
          left: 28%;
          z-index: 5;
          border-radius: 37rpx;
          height: 66rpx;
          line-height: 66rpx;
          background: #fd5b4c;
    }

    #preview image {
          width: 87%;
          position: absolute;
          top: 8%;
          left: 6%;
          z-index: 3;
          border-radius: 19rpx;
    }

    #preview .hide1 image {
          width: 10%;
          height: 6%;
          position: absolute;
          right: 0;
          left: 84%;
     }

    #preview text {
          position: absolute;
          bottom: 170rpx;
          left: 25%;
          z-index: 5;
          font-size: 22rpx;
          color: gainsboro;
    }

    canvas { 
      position: fixed;
      top: 0;
      left: 10000rpx;
    }

    


  wxml

  <canvas canvas-id="shareImg" style="width:545px;height:771px;"></canvas>        
      <view hidden='{{hidden}}' id='preview' class="hide1{{show1?'':'show'}}">
          <image src='{{prurl}}' mode='widthFix'></image>
          <button type='primary' size='mini' bindtap='save'>保存分享图</button>
          <text>保存后，可以从手机相册分享到朋友圈</text>
          <view class="hide1{{show1?'':'show'}}" bindtap='onTap'>
              <image src='../../images/Close.png'></image>
         </view>
     </view>

   js


  getData() {
   /*商品详情接口数据代码省略*/
  //下载图片
  var that = this;
  wx.downloadFile({   //需要小程序后台添加downloadFile域名
    url: res.result.product.images[0].url,    //接口返回数据
    type: 'image',     //类别
    success: function (res) {
      var _avatarPath = res.tempFilePath
      const ctx = wx.createCanvasContext('shareImg');
      var imgPath = _avatarPath //商品图
      console.log(imgPath)
      var bgImgPath = '../../images/qrcode.jpg';  //二维码图
      ctx.setFillStyle('white')
      ctx.fillRect(0, 0, 6000, 2800);
      ctx.drawImage(imgPath, 120, 30, 320, 320);
      ctx.drawImage(bgImgPath, 40, 500, 120, 110);
      ctx.setFontSize(22)
      ctx.beginPath("")
      var lineWidth = 0;
      var canvasWidth = 300;
      var initHeight = 380;
      var lastSubStrIndex = 0;
      ctx.setFillStyle('black')
      var str = that.data.product.title     //商品价格名称
      ctx.fillText('长按识别图中的小程序码', 190, 540)
      ctx.fillText('查看详情', 190, 580)
      //文字换行    这个地方有可能报错注释掉就可以
       for (let i = 0; i < str.length; i++) {
         lineWidth += ctx.measureText(str[i]).width;
         if (lineWidth > canvasWidth) {
           ctx.fillText(str.substring(lastSubStrIndex, i), 18, initHeight);   //绘制截取部分
           initHeight += 34;  //文字行高
           lineWidth = 0;
           lastSubStrIndex = i;
         }
         if (i == str.length - 1) {//绘制剩余部分
           ctx.fillText(str.substring(lastSubStrIndex, i + 1), 18, initHeight);
         }
       }
      ctx.setFillStyle('red')
      ctx.fillText(that.data.product.price, 460, 380)     //that.data.product.price   商品价格数据
      ctx.setStrokeStyle('gainsboro')
      ctx.strokeRect(20, 450, 510, 0.1)
      ctx.stroke()
      ctx.draw()
    }
  })
}