為什麼「canvas.toDataURL()」會拋出跨來源影像的安全異常？

為什麼在取得跨來源圖片時canvas.toDataURL()會觸發安全異常？

嘗試執行canvas.toDataURL(時）在包含從跨域來源取得的映像的 HTML5 canvas 元素上，您可能會遇到「SECURITY_ERR：DOM Exception 18」錯誤。發生這種情況是由於網頁瀏覽器施加的安全限制。

根據 HTML5 規範，在「origin-clean」標誌為 false 的畫布元素上呼叫 toDataURL() 方法時，會引發 SECURITY_ERR 例外。如果 canvas 元素僅包含與其所在文件同源的資源，則此標誌設為 true。在您的情況下，由於圖像源自不同的域，因此“origin-clean”標誌設置為 false。

解決方法：

不幸的是，由於由於這些安全限制，無法使用 toDataURL() 檢索跨來源影像的 PNG 表示形式。若要解決此問題，請考慮以下選項：

• 使用啟用 CORS 的代理程式： 設定啟用跨來源資源共用 (CORS) 的伺服器端代理程式。這允許您發出跨域請求並繞過安全限制。
• 使用 HTML5 檔案 API： 不使用 toDataURL()，而是利用 File API 從下列位置建立 File 物件：畫布。這樣您就可以將影像儲存為文件，而無需依賴 CORS。
• 使用第三方服務：探索提供跨域影像檢索功能的第三方服務，例如 crossOrigin .我。

以上是為什麼「canvas.toDataURL()」會拋出跨來源影像的安全異常？的詳細內容。更多資訊請關注PHP中文網其他相關文章！