微信小程序分享图，利用canvas制图，保存手机，为什么是空白的啊，跟手机系统有关系？

Question

HTML

<view class='vw'>

    <canvas canvas-id='myCanvas' style='width:375px;height:667px;background:#f5f5f5;'>

    </canvas>

    <button class='btn' bindtap='abc'>

    保存图片

    </button>

</view>

javascript

onReady: function (e) {

    //这是canvas将图片放在canvas上

    var ctx = wx.createCanvasContext('myCanvas')

    var imgPath = 'http://up.qqjia.com/z/23/tu27726_2.jpg'

    var bgImgPath = 'http://img.keaiq.com/d/file/15155477475202100.jpg'

    var smallage = 'https://t2.38mt.com/tempx/11/11767/3762-73772.jpg'

    ctx.setFillStyle('#ffffff')

    ctx.fillRect(0,520,600,280)

    ctx.drawImage(imgPath, 100, 120,180,260)

    ctx.drawImage(smallage, 220, 320,60,60)

    ctx.drawImage(bgImgPath, 30,520,80,100)

    ctx.setFillStyle('#6f6f6f')

    ctx.font = "18px Arial";

    ctx.fillText('歪歪歪', 110,580)

    ctx.draw()

    setTimeout(() => {

      this.canvasImg()

    }, 700)

  }

//转换

 canvasImg: function () {

   console.log(123)

   var that = this

   // 画布转成图片

   wx.canvasToTempFilePath({

     canvasId: 'myCanvas',

     x: 0,

     y: 0,

     width: 375,

     height: 667,

     //生成图片的大小

     destWidth: 375,

     destHeight: 667,

     success: function (res) {

       wx.hideLoading()

       console.log(res.tempFilePath, 'canvas画图片呀')

       that.setData({

         img: res.tempFilePath

       })

     }

   })

 }

然后到手机上面会是全部空白的，存电脑上还能显示，但是还带着按钮 存手机上就是空白的

Answer 1

小程序不能直接使用网络图片，也就是说你上面使用的图片的地址，需要先调用小程序的wx.downloadFile方法，将返回的本地路径绘制到canvas。绘制完成后，再调用保存到相册那个方法就行了。