鍍金池/ 問(wèn)答/網(wǎng)絡(luò)營(yíng)銷  HTML/ 微信小程序分享圖,利用canvas制圖,保存手機(jī),為什么是空白的啊,跟手機(jī)系統(tǒng)有

微信小程序分享圖,利用canvas制圖,保存手機(jī),為什么是空白的啊,跟手機(jī)系統(tǒng)有關(guān)系?

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)
  }
//轉(zhuǎn)換
 canvasImg: function () {
   console.log(123)
   var that = this
   // 畫布轉(zhuǎn)成圖片
   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
       })
     }
   })
 }
然后到手機(jī)上面會(huì)是全部空白的,存電腦上還能顯示,但是還帶著按鈕 存手機(jī)上就是空白的
回答
編輯回答
汐顏

小程序不能直接使用網(wǎng)絡(luò)圖片,也就是說(shuō)你上面使用的圖片的地址,需要先調(diào)用小程序的wx.downloadFile方法,將返回的本地路徑繪制到canvas。繪制完成后,再調(diào)用保存到相冊(cè)那個(gè)方法就行了。

2018年6月27日 03:51