uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決

問題圖:

效果圖:

Canvas繪制圖片流程
簡(jiǎn)單說(shuō)一下canvas上繪制圖片的過(guò)程
??先調(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)的功能,通過(guò)google參考了一些實(shí)現(xiàn)方式2011-12-12
JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析
這篇文章主要介紹了JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
TypeScript裝飾器與反射元數(shù)據(jù)實(shí)例詳解
TypeScript的裝飾器為我們提供了一種強(qiáng)大的工具,可以在運(yùn)行時(shí)改變類的行為,通過(guò)理解裝飾器的工作原理,我們可以創(chuàng)造更加強(qiáng)大、靈活且易于維護(hù)的應(yīng)用,這篇文章主要介紹了TypeScript裝飾器與反射元數(shù)據(jù),需要的朋友可以參考下2023-09-09

