目前正在開發小程序,在開發過程中,總會遇到一些坑,而這些坑並不會有很多開發者遇到而說出來.這里先記錄一條我開發過程中遇到的問題,以便后人在開發中能夠更容易的解決問題!!!
首先,小程序在canvas畫自己想要的圖時,我通常會用以下兩種獲取圖片的方式:
1. 通過wx.downloadFile加載圖片時,圖片的路徑為:res.tempFilePath;以下為官方api
wx.downloadFile({
url: 'https://example.com/audio/123', //僅為示例，並非真實的資源
success: function(res) {
// 只要服務器有響應數據，就會把響應內容寫入文件並進入 success 回調，業務需要自行判斷是否下載到了想要的內容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath //臨時文件路徑，下載后的文件會存儲到一個臨時文件
})
}
}
})
2. 通過wx.getImageInfo加載圖片時,圖片的路徑為:res.path;以下為官方api
wx.getImageInfo({
src: 'images/a.jpg',
success: function (res) {
console.log(res.path) //打印圖片的本地路徑
}
})
如果你已經在畫布上畫了一張背景圖,繼續畫其他的圖片時,就會遇到可能你的路徑是正確的,但是就是畫不上去,而且success回調函數確實調用成功了,此時,你會不會很無解?
由於我是開發過程中在一張底圖畫四張小圖片,而且是依着順序畫,畢竟是從數組取到的值,所以會在第一張畫完后success函數中繼續加同樣的獲取圖片然后ctx.drawImage()操作,這樣就能保證前面圖片的可以畫上去,當然你也可以單獨拆分出來獲取,我只是習慣性的寫法,可能不是最佳方案(自行參考)
問題就出來了,我畫的四張圖片竟然有一張或者兩張不顯示,而且不報錯,是不是很神奇?而且是都是success回調中執行的操作,這就讓我納悶了!!!到底是什么原因導致出現的問題?我從數組取值,直接用瀏覽器訪問圖片,可以打開,而小程序確畫不上去,着實讓人頭疼!!!當然這個並不是最傷腦筋的,我就開始推測可能出現的問題:
- 網絡問題
- 小程序圖片加載的問題
- 可能是和開發者工具有關
接着,開始慢慢測試唄,網絡問題被窩瞬間排查出去,name就是圖片加載咯,我只能console.log()打印success回調中的參數,問題出來了,參數給的path或者tempFilePath是json數據!!!同時給出的statusCode為404,,,是不是很無語,我給他傳入的圖片路徑是正確的,而他加載出來的卻是404,找不到???好吧,我服了YOU,我只能用傻傻的辦法,給了它一個if判斷
if (res.statusCode == 404) {
ctx.drawImage(res.tempFilePath, parseInt(canvasWidth) / 9.4, parseInt(canvasWidth) / 2.6, parseInt(canvasWidth) / 2.8428, parseInt(canvasWidth) / 2.8428);
ctx.draw(true)
} //parseInt(canvasWidth)/n 是我對不同手機canvas畫圖時用的處理兼容算的值 根據寬度控制
我的if判斷是在它第一次ctx.drawImage結束后判斷,然后再讓它執行一次,這樣他就會老老實實的給我去找圖片然后加載畫上去,事實證明問題解決了.(當然我每個都加了一遍,防止意外,哈哈)
總結:遇到問題不可怕,可怕的是遇到問題不知道怎么解決,然后亂了思緒.
程序員最好的狀態應該就是遇到問題反而興奮,尋求解決辦法,解決后的那種小小的成就感.
本篇文章轉自我的知乎https://zhuanlan.zhihu.com/p/33726623