目錄
項目場景：
問題描述
原因分析：
解決方案：
嘗試1：
嘗試2：
嘗試過程：
項目場景：
使用微信小程序的api進行canvas繪制海報或者二維碼
技術(shù)：uniapp
版本：3.0.0（3.0.1也可以，低版本沒有試過）
需求：點擊后彈出個人二維碼
問題描述
完整報錯：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
原因分析：
這個二維碼是通過一個依賴將文本生成base64圖片格式，在通過另一個依賴進行轉(zhuǎn)換為臨時路徑（兩個依賴會放到下一篇博客講感興趣的話可以看看）通過uniapp的drawImage進行繪制圖片接著就報錯了，進行排查發(fā)現(xiàn)跟它一點關(guān)系都沒有，將
draw注釋掉后好了，不報錯了，我就知道我的canvas是沒有任何問題的，因為draw就是繪制到畫布上的，不可能會報錯，那么問題最大可能就是出在了二維碼或者html上了
解決方案：
嘗試1：
將生成二維碼的依賴更換成了：uQRCode，直接畫出去二維碼，但就是很快就不行了，因為二維碼會覆蓋，（解決方法：.restore();跟save()）一個回復之前的畫布，一個保存當前畫布，當然了draw也行給個true
但是這跟我的想法不太符合，于是就有了2
嘗試2：
我的渲染是放在methods里面的，但是canvas是放Uview的u-popup里面的，單獨放沒有問題，但是加上v-if后就直接報錯了，替換成v-show后變成了時不時的報錯，最后沒辦法將組件舍去自己手寫了樣式，加上了visibility：hidden，點擊事件的時候動態(tài)切換類，至此問題解決??！
嘗試過程：
在解決這個報錯的途中也找了不少的文章但是他們的方法都沒有什么效果
方法1：給canvas加上寬高
方法2：刪除文件
方法3：渲染的時候加上個定時器
方法4：解密微信返回的臨時路徑
方法5：將canvas的導出并賦給一個image
等等....文章來源：http://www.zghlxwxcb.cn/news/detail-713659.html
覺得有幫助的話點個贊吧！文章來源地址http://www.zghlxwxcb.cn/news/detail-713659.html
到了這里，關(guān)于微信小程序使用canvas報：canvasToTempFilePath:fail executeCanvasMethod failed: Failed to execute ‘drawImage‘的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
