uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決
問題圖:
效果圖:
Canvas繪制圖片流程
簡(jiǎn)單說一下canvas上繪制圖片的過程
??先調(diào)用相機(jī)接口拍攝照片,
??把照片URL拿到,
??然后獲取照片URL信息寬高,
??把寬高給畫布,??使用canvas的drawImage API把圖片繪制到canvas上,??繪制方法執(zhí)行完成后把這個(gè)canvas導(dǎo)出為圖片,并上傳到服務(wù)器,至此流程結(jié)束。
首先定義畫布canvas
<canvas class="canvas" canvas-id="canvas" :style="{ height: canvasHeight + 'px', width: canvasWidth + 'px' }"></canvas>
1.畫布的大小大于了圖片的大小導(dǎo)致了生成的內(nèi)容是空白的
canvas畫布初始值沒有,導(dǎo)致沒有繪制成功
解決:
//默認(rèn)初始值 canvasWidth1 canvasHeight1 data() { return { ctx: null, canvasWidth: 1080, canvasHeight: 1440, } },
2.繪制圖片沒有放到wx.draw方法里面
wx.draw(false, () =>{ wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'shareCanvas', // shareCanvas 為制定 繪圖canvas 的ID success: (res) => { this.storeImgPath = res.tempFilePath ....寫入生成完成的邏輯 }, complete: (res) => { wx.hideLoading() } }) })
3.Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
canvas無(wú)法執(zhí)行toDataURL方法,受污染的畫布無(wú)法輸出
受限于CORS 策略,會(huì)存在跨域問題,頁(yè)面雖然可以使用跨域的圖片(比如使用img標(biāo)簽或者append到頁(yè)面上),因?yàn)闉g覽器本身不會(huì)有跨域問題,但是一旦繪制到canvas上就會(huì)污染這個(gè)canvas,導(dǎo)致無(wú)法提取到這個(gè)canvas的數(shù)據(jù),也就無(wú)法輸出了。
上面的都加了還存在,必殺技,延遲方法:
//萬(wàn)能代碼,不能用你回來(lái)找我,能用可以雙擊點(diǎn)贊評(píng)論666 console.log('正在繪制') this.ctx.draw(false,(()=> { setTimeout(() => { uni.canvasToTempFilePath({ x: 0, y: 0, width: this.canvasWidth1, height: this.canvasHeight1, destWidth: this.canvasWidth1, destHeight: this.canvasHeight1, canvasId: 'myCanvas',quality:0.6, success: res => { // 在H5平臺(tái)下,tempFilePath 為 base64 console.log(res,'繪制完成===',) //上傳 uni.uploadFile({ url: url, //僅為示例,非真實(shí)的接口地址 filePath:res.tempFilePath, header: { 'token': self.$store.state.token,"version":"100.0.00" }, name: 'file', formData: {}, success: (uploadFileRes) => { console.log('uploadFileRes===1111',uploadFileRes) uni.hideLoading() }, fail(err) { console.log(err) uni.hideLoading() } }); // this.pictureArr.push(res.tempFilePath); }, fail(err) { console.log(err) uni.showToast({ title:'上傳圖片失敗!',icon:'none', duration: 3000 }) uni.hideLoading() } }, this) }, 3500) })());
萬(wàn)能代碼,不能用你回來(lái)找我
總結(jié)
到此這篇關(guān)于uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決的文章就介紹到這了,更多相關(guān)uniapp canvas繪制圖片內(nèi)容空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的方法
- uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
- uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法
- uniapp幾行代碼解決滾動(dòng)穿透問題(項(xiàng)目實(shí)戰(zhàn))
- uniapp實(shí)現(xiàn)橫向滾動(dòng)選擇日期
- Vue和uniapp中該如何使用canvas詳解
- uniapp封裝canvas組件無(wú)腦繪制保存小程序分享海報(bào)
- uniapp中實(shí)現(xiàn)canvas超出屏幕滾動(dòng)查看功能
相關(guān)文章
Ajax高級(jí)筆記 JavaScript高級(jí)程序設(shè)計(jì)筆記
這篇文章主要介紹了Ajax高級(jí)筆記 JavaScript高級(jí)程序設(shè)計(jì)筆記,需要的朋友可以參考下2017-06-06非主流的textarea自增長(zhǎng)實(shí)現(xiàn)js代碼
今天稍微研究了下textarea隨輸入內(nèi)容自動(dòng)增長(zhǎng)的功能,通過google參考了一些實(shí)現(xiàn)方式2011-12-12JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析
這篇文章主要介紹了JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07TypeScript裝飾器與反射元數(shù)據(jù)實(shí)例詳解
TypeScript的裝飾器為我們提供了一種強(qiáng)大的工具,可以在運(yùn)行時(shí)改變類的行為,通過理解裝飾器的工作原理,我們可以創(chuàng)造更加強(qiáng)大、靈活且易于維護(hù)的應(yīng)用,這篇文章主要介紹了TypeScript裝飾器與反射元數(shù)據(jù),需要的朋友可以參考下2023-09-09