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

}