使用toDataURL時如何獲取用drawImage繪制的圖像？

Question

我正在一個頁面上，您將可以在畫布上繪制圖像。 您有6種圖像選擇，完成后，我希望人們能夠保存他們的創作。

我正在使用drawImage在畫布上繪制圖像，但是當我使用以下代碼時：

var canvas = document.getElementById("canvas");  
window.open(canvas.toDataURL("image/png"));

它不會在DataUrl圖像上顯示繪制的圖像。

如何確保在畫布上繪制的圖像在toDataURL給定的圖像中也可見？

Answer 1

頁面的URL和正在繪制的圖像是什么？

如果圖像與頁面來源不同，則將無法使用toDataURL或任何其他方法來讀取畫布的內容。 這是故意的安全功能。 檢查您的JavaScript錯誤控制台，您可能會看到類似“ DOM錯誤”或“安全異常”的信息。

我什么意思 我的意思是，如果您的網頁位於某個網址（例如test.com ， localhost:8080 ， file:///home/foo/ ），並且您繪制的圖像位於具有不同來源的網址（ google.com是來自test.com不同來源， localhost:3000是不同於localhost:8080 ，某些瀏覽器將file:/// url視為始終來自不同的來源），那么一旦繪制，瀏覽器就會將畫布標記為不可讀圖像。

為什么這樣呢？ 頁面可以顯示其他來源的圖像，但是除非明確允許，否則許多其他形式的跨域訪問都將被拒絕-例如XMLHttpRequest 。

file URL也被區別對待，因為它們可能更易濫用。 如果您將本地文件用於頁面和圖像，請使用簡單的Web服務器為其提供服務。

本節中的第一個項目符號適用。