PHP / Javascript / HTML5畫布 - 加載外部圖像

Question

好的，我想：

1. 抓住外部圖像
2. 將其導入畫布對象
3. 壓縮它
4. 保存

我已經完成了本地圖像的全部工作，但是嘗試將外部圖像導入到畫布對象會產生安全性錯誤。

通過使用PHP，我可以在本地創建外部文件的副本：

file_put_contents("copy.jpg", file_get_contents("http://external.com/image.jpg"));

問題是，外部圖像可能非常大 - 高達3MB，並且在下載圖像之前嘗試進行畫布導入。

是否有PHP或Javascript代碼等待文件完全下載？

或者有更好的方法嗎？

Answer 1

您可以使用jQuery.ajax（）並在操作畫布的成功回調上使用

Answer 2

如果要等到整個文件加載完畢：

document.onload = function(){ //load image };

如果要等到畫布已加載：

canvas.onload = function(){ //load image };

這是最簡單的方法。 但是，如果您想要更有效的結果，我建議使用jQuery。

Answer 3

使用ajax抓取外部圖像。 在成功回調中操作畫布或使用不同的回調函數。 這是給你的一些演示代碼

 $.ajax({

 success: function(success) {

 process(success);

 }

});

var process = function(input){

// manipulate the canvas here

}