• 設置圖片crossOrigin屬性

image.crossOrigin = 'Annoymous'

crossorigin有如下取值：

anonymous：執行一個cors請求，但是該請求不會發送相關證書，例如cookie。服務器需要相應的設置Access-control-Allow-Origin響應頭，圖片才是未被污染的。

use-credentials:
執行一個cors請求，該請求會發送相關證書，攜帶cookie和http基本驗證信息。服務器需要相應設置Access-Control-Allow-Origin響應頭。

發現問題

設置完crossOrigin屬性后，設置access-control-allow-origin后，依然發現畫布跨域報錯，在本人反復研究下，發現與瀏覽器的緩存存在關系，那么如何每次使用畫布時清除瀏覽器的緩存呢？

解決問題

在查閱大量材料后發現通過：

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。