• 設(shè)置圖片crossOrigin屬性

image.crossOrigin = 'Annoymous'

crossorigin有如下取值：

anonymous：執(zhí)行一個(gè)cors請(qǐng)求，但是該請(qǐng)求不會(huì)發(fā)送相關(guān)證書，例如cookie。服務(wù)器需要相應(yīng)的設(shè)置Access-control-Allow-Origin響應(yīng)頭，圖片才是未被污染的。

use-credentials:
執(zhí)行一個(gè)cors請(qǐng)求，該請(qǐng)求會(huì)發(fā)送相關(guān)證書，攜帶cookie和http基本驗(yàn)證信息。服務(wù)器需要相應(yīng)設(shè)置Access-Control-Allow-Origin響應(yīng)頭。

發(fā)現(xiàn)問題

設(shè)置完crossOrigin屬性后，設(shè)置access-control-allow-origin后，依然發(fā)現(xiàn)畫布跨域報(bào)錯(cuò)，在本人反復(fù)研究下，發(fā)現(xiàn)與瀏覽器的緩存存在關(guān)系，那么如何每次使用畫布時(shí)清除瀏覽器的緩存呢？

解決問題

在查閱大量材料后發(fā)現(xiàn)通過：

image.src = this.previewImgObj.fileUrl + `?timestamp= ${Date.now()}`

通過給圖片路徑拼接時(shí)間戳的方式，使之實(shí)現(xiàn)每次通過畫布的圖片路徑唯一，即可解決圖片跨域報(bào)錯(cuò)，完美解決、nice
也可通過在圖像的 src ( img.src = url + '?v=' + Math.random();) 中附加一個(gè)隨機(jī)查詢字符串來避免緩存。
如果您的圖像來自不同的域，并且您希望能夠在繪制這些圖像后導(dǎo)出畫布內(nèi)容，那么除了使用crossOrigin屬性加載它們之外，您別無選擇。
如果您真的面臨鏈接錯(cuò)誤，根據(jù)它，正確的解決方法是始終從您的服務(wù)器響應(yīng)發(fā)送 CORS 標(biāo)頭，無論請(qǐng)求是否使用 Origin 標(biāo)頭發(fā)出。

總結(jié)

以上是生活随笔為你收集整理的解决canvas画布图片跨域问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。