PHP / Javascript / HTML5 canvas - 加载外部图像答案

【问题标题】：PHP / Javascript / HTML5 canvas - loading external imagesPHP / Javascript / HTML5 canvas - 加载外部图像
【发布时间】：2015-07-01 18:51:06
【问题描述】：

好的，我想：

获取外部图像
将其导入画布对象
压缩它
保存

我已经完成了使用本地图像的全部工作，但是尝试将外部图像导入画布对象会产生安全错误。

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

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

问题是，外部图像可能非常大 - 最多 3MB，并且画布导入尝试在图像下载之前进行。

是否有等待文件完全下载的 PHP 或 Javascript 代码？

或者有更好的方法吗？

【问题讨论】：

您可以只使用 php 脚本作为代理。 imagefetch.php?src=http://example.com/kittens.jpg。使用一些缓存逻辑，您只需要获取一次图像，并且此脚本可以用作画布源 - 只有在服务器端获取完成后，图像才会进入画布。
嗨，Marc，这将如何运作？我对此很陌生。图片对象存放在source_img_obj中，canvas代码是这样的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去哪里了？
您只需将画布的图像源设置为您的 php 脚本。并且脚本基本上相当于<?php header('Content-type: image/jpeg'); readfile('http://example.com/kittens.jpg'); ?>
对不起，我仍然不关注...作为 drawImage 的一部分？ var ctx = cvs.getContext("2d").drawImage(<?php header('Content-type: image/jpeg'); readfile('http://example.com/kittens.jpg'); ?>, 0, 0);

标签： javascript php html canvas

【解决方案1】：

您可以使用jQuery.ajax() 并在成功回调上操作画布

【讨论】：

【解决方案2】：

如果您想等到整个文件加载完毕：

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

如果您想等到画布加载完毕：

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

这是最简单的方法。但是，如果您想要更有效的结果，我建议使用 jQuery。

【讨论】：

【解决方案3】：

使用 ajax 抓取外部图像。在成功回调中或使用不同的回调函数操作画布。这是给你的一些演示代码

 $.ajax({

 success: function(success) {

 process(success);

 }

});

var process = function(input){

// manipulate the canvas here

}

【讨论】：