標(biāo)題有點(diǎn)繞，問(wèn)題是這樣的：小程序用canvas繪制一包含圖片的內(nèi)容使用自帶的API：drawImage，然后將其生成圖片保存到相冊(cè)，pc端模擬器可以完美實(shí)現(xiàn)，然而真機(jī)生成圖片沒(méi)有所繪制的圖片

原因是這樣的：

首先看小程序官方文檔上drawImage的用法：

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
success: function(res){
//res.tempFilePaths[0] 為圖片網(wǎng)絡(luò)路徑
ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)；
ctx.draw()；
}
})

結(jié)果是 渲染失敗

下面是解決方法
小程序的canvas繪制圖片，圖片路徑必須為本地的路徑，而不能是網(wǎng)絡(luò)路徑。

   因此在繪制網(wǎng)絡(luò)圖片時(shí)必需先將其保存到本地然后在繪制。當(dāng)我們?cè)诩虞d一個(gè)帶有圖片的頁(yè)面時(shí)，圖片都會(huì)被暫存到本地，由此我們可以通過(guò)wx.gerImageInfo接口訪問(wèn)本地的暫存路徑來(lái)調(diào)用drawImage方法繪制圖片。如下：（注意網(wǎng)絡(luò)圖片的地址一定要在合法域名內(nèi)）

//獲取網(wǎng)絡(luò)圖片本地路徑
wx.getImageInfo({
src: that.data.qrCodeUrl,//服務(wù)器返回的圖片地址
success: function (res) {
//res.path是網(wǎng)絡(luò)圖片的本地地址
let Path = res.path; //把網(wǎng)絡(luò)地址變成 canvas 可以識(shí)別的地址
that.setData({
localQrCodeUrl: Path
})
},
fail: function (res) {
//失敗回調(diào)
}
});

wx.chooseImage({
success: function(res){
//res.tempFilePaths[0] 為圖片網(wǎng)絡(luò)路徑
ctx.drawImage(localQrCodeUrl, 0, 0, 150, 100)；
ctx.draw()；
}
})

現(xiàn)在就成功了