看其他人寫的程式碼出現的其中的imageResource的路徑是網路路徑，

這個在手機端預覽是有問題的圖片是需要下載的

  onShow: function () { const that = this; wx.downloadFile({ url: that.data.img, success: function (res) { console.log(res); that.data.img = res.tempFilePath }, fail: function (fres) {
} }) },

canvasContext.drawImage

定義

繪製圖像到畫布。

引數

引數	型別	說明
imageResource	String	所要繪製的圖片資源
dx	Number	影象的左上角在目標canvas上 X 軸的位置
dy	Number	影象的左上角在目標canvas上 Y 軸的位置
dWidth	Number	在目標畫布上繪製圖像的寬度，允許對繪製的影象進行縮放
dHeigt	Number	在目標畫布上繪製圖像的高度，允許對繪製的影象進行縮放
sx	Number	源影象的矩形選擇框的左上角 X 座標
sy	Number	源影象的矩形選擇框的左上角 Y 座標
sWidth	Number	源影象的矩形選擇框的高度
sHeight	Number	源影象的矩形選擇框的高度

有三個版本的寫法：

• drawImage(dx, dy)
• drawImage(dx, dy, dWidth, dHeight)
• drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 從 1.9.0 起支援

圖片繪製，遇到的問題使用網路路徑，圖片電腦端可以訪問，但是手機端卻不可以。console.log(name) var that = this; var context = wx.createCanvasContext('mycanvas'); var path = img; //這個地方的圖片是需要注意，圖片需要下載不然，手機上不能正常顯示 context.drawImage(path, 0, 0, 686, 686) wenzi(context,name); //繪製圖片 context.draw(); //將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時 setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); wx.setStorageSync('img', tempFilePath) return tempFilePath }, fail: function (res) { console.log(res); } }); }, 200);