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代码可以等待文件完全下载？还是有更好的方法来解决这个问题？

- Lee

---

你可以使用php脚本作为代理。imagefetch.php?src=http://example.com/kittens.jpg。通过一些缓存逻辑，你只需要获取一次图片，这个脚本就可以用作画布源——只有在服务器端获取完成后，图片才会传输到画布上。 - Marc B

嗨，马克，这个怎么工作呢？我很新手。图像对象存储在source_img_obj中，画布代码如下：var cvs = document.createElement('canvas'); cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100);那么imagefetch.php应该放在哪里呢？ - Lee

你只需要将画布的图像源设置为你的 PHP 脚本。脚本基本上相当于 <?php header('Content-type: image/jpeg'); readfile('http://example.com/kittens.jpg'); ?>。 - Marc B

抱歉，我还是不明白...作为drawImage的一部分吗？var ctx = cvs.getContext("2d").drawImage(<?php header('Content-type: image/jpeg'); readfile('http://example.com/kittens.jpg'); ?>, 0, 0); - Lee

Answer 1

使用ajax获取外部图像。在成功回调函数内或使用不同的回调函数中操作画布。以下是一些演示代码供您参考

 $.ajax({

 success: function(success) {

 process(success);

 }

});

var process = function(input){

// manipulate the canvas here

}

- Jijo John

Answer 2

你可以使用jQuery.ajax()，在成功回调函数中操作画布

- meda

Answer 3

如果您想等待整个文件加载完成： < p > < code > document.onload = function(){ //load image }; 如果您想等待画布加载完成： < p > < code > canvas.onload = function(){ //load image }; 这是最简单的方法。但是，如果您想要更有效的结果，我建议使用jQuery。

- Tommy Jinks