將html5畫布另存為圖像

Question

我正在嘗試在具有背景圖像的畫布中獲取Facebook用戶的照片。 現在，我想默認將畫布保存為圖像或單擊按鈕。 我進行了徹底的研究，發現使用此方法可以完成

var myImage = canvas1.toDataURL("image/png");
imageElement.src = myImage;     

但我無法弄清楚如何使其與我的代碼一起使用。 我嘗試了所有我能想到的可能性。 它不起作用。 任何幫助將不勝感激。

Answer 1

從另一個域加載圖像后，不能在canvas元素上使用toDataUrl。 這是HTML5規范指定的安全問題

解決此問題的一種方法是，如果您可以控制提供圖像的服務器，則可以使用access-control-allow-origin頭提供這些圖像。 您可以在此處了解更多信息： http : //www.w3.org/TR/cors/#use-cases

另一個選擇是代理服務器中的圖像，從而代理您的域。 而不是從給定的網址詢問圖像，您的js代碼將調用服務器上的腳本，該腳本將獲取圖像並將其提供給您。

在您的情況下，您正在嘗試從facebook抓取圖像，這些圖像顯然不會發送這些標頭，因為這將是一個巨大的安全問題。 您將不得不訴諸服務器端代理解決方案。