如何使用javascript/ajax将图像URL转换为DOM文件对象

How to transform an image URL into a DOM file object using javascript/ajax?

本文关键字：转换 DOM 文件 对象 URL 图像 javascript 何使用 ajax      更新时间：2023-09-26

我有一个脚本，允许我使用jcrop裁剪图像。要做到这一点，我必须使用input type file从我的计算机上传一个图像。我想扩展我的应用程序的功能，允许用户从他们的facebook相册中选择照片，这段代码是工作的，但它返回我的图像的URL。从URL中创建如下的图像对象

var oImage = document.getElementById('preview');

但这是一个图像对象，而不是一个文件对象，这将不允许我得到一些文件属性，如oImage.size和oImage.type。原始代码是这样的

<input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" />

和javascript代码

function fileSelectHandler() {
   var oFile = $('#image_file')[0].files[0];
   ...
}

现在我有一个函数，它的回调函数是一个Facebook图片URL，我希望它的工作方式就像我从电脑上传图片一样，因为这个输入类型文件被提交到服务器。

var oImage = document.getElementById('preview');
oImage.src = photo.source;

其中photo.source是我的URL。

所以我的问题是:如何将URL转换为使用javascript/ajax的文件类型?我还需要把这个类型放到文件输入中因为这是一个要提交的表单。

您应该将URL发布到您的服务器，然后您可以使用PHP下载远程映像并对其进行操作。

提示代码:

if(isset($_POST['image_url'])){
    //Make sure to validate $_POST['image_url'] before using it
    $image = file_get_contents($_POST['image_url']);
} else {
    $image = file_get_contents($_FILES["file"]["tmp_name"]);
}

我通常使用JQuery，JQuery示例ajax post:

$.post('server.php', {image_url:photo.source}, function(data){
  //do stuff on server response
});
相关文章：