标准HTML文件上载的工作方式如下:

<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"  
     name="form" url="someurl">

    <input type="file" name="file" id="file" />

</form>

在我的情况下,我将图像加载到html5画布,并希望将其作为文件提交到服务器.我可以:

var canvas; // some canvas with an image
var url = canvas.toDataURL();

这给了我一个image/png作为base64.

如何将base64映像以与输入类型文件相同的方式发送到服务器？

问题是base64文件的类型与文件类型不同,后者位于input type ="file"中.

我可以以某种方式转换服务器类型相同的base64吗？

我需要在Javascript中将dataURL转换为File对象,以便使用AJAX将其发送出去.可能吗？如果是,请告诉我如何.

我正在开发一个极简主义的图像创建项目,我需要能够在浏览器中创建在服务器上反过来使用的图像.到目前为止,该Canvas.toDataUrl()方法已经满足了我们的需求,但我刚刚学会Canvas.toBlob()了更方便的方法.

似乎该toBlob()方法对规范来说是新的几个月(我找不到任何直接引用它的时间.)

哪些浏览器支持toBlob,更重要的是哪些版本的浏览器包含该方法的集成？此外,是否支持此功能"buggy"或正在开发任何主流浏览器？

UPDATE

我8个月前问了这个问题.我已经提交了我之前提到的项目,等待canvas.toBlob()方法状态的任何更新.从我可以在网上收集的内容来看,实现toBlob()似乎是在某些浏览器中使用.

我再次问,canvas.toBlob()开始集成HTML5画布对象的浏览器中哪种方法无处不在,哪些版本的浏览器是第一个集成这种支持的？

我有两个base64用PNG编码,我需要使用Resemble.JS进行比较

我认为最好的方法是使用转换PNG为文件对象fileReader.我该怎么做？

这是我现在用来使用HTML5 File API上传多个图像的代码片段:

/**
 * @param {FileList} files
 */
upload: function(files){
    nfiles = files.length;

    for (var i = 0; i < nfiles; i++) {
        /** @var file File **/
        var file = files[i];

        var xhr = new XMLHttpRequest();

        xhr.open("POST", settings.post_upload, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.upload.filenumb = i;
        xhr.filenumb = i;
        xhr.upload.filename = file.name;

        var nef = new FormData();
        nef.append("folder", settings.folder);
        nef.append("file_element", settings.file_elem);
        nef.append("udata", settings.user_data);
        nef.append(settings.file_elem, file);
        xhr.send(nef);

    }
}

我想在使用canvas对象上传之前调整图像大小,但没有相关经验,我不知道如何使用技术更新代码,例如下面描述的那些:HTML5在上传之前预先调整图像大小

canvas.toDataURL("image/png");将返回一个编码的字符串.但是我需要发布这个File对象.

编辑

如何(合理地)为大多数现代浏览器编写跨浏览器功能,以便在上传之前调整文件大小,处理具有透明度的jpg,png和gif: …

首先,在SO上有一个相同标题的问题,但它不是我正在寻找的,也没有完整的答案.

所以这是我的问题.假设我有这个指向图像的URL.

https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg

一旦我将此参数放在?dl=1URL的末尾,它就可以下载了.

https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1

我正在尝试通过用户脚本执行此任务.所以我使用了XMLHttpRequest.

var url = "https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/299595_10150290138650735_543370734_8021370_355110168_n.jpg?dl=1";

var request = new XMLHttpRequest();  
request.open("GET", url, false);   
request.send(null);  

if (request.status === 200) 
{  
    alert(request.statusText);
}

这是一个小提琴.

但它不起作用.

我想构建一个包含JavaScript的简单HTML页面来执行表单POST,其中包含嵌入在HTML中的图像数据与磁盘上的文件.

我看过这篇文章可以使用常规表单数据,但我对图像数据感到困惑.

JavaScript发布请求,如表单提交

我想将Dropzone.js与客户端图像大小调整集成.我知道有一个调整缩略图大小的功能,但我想在上传之前创建一个调整主图像大小的功能.有人可以帮我吗？

首先我要说的是,我通常非常不愿意发布这些问题,因为我总觉得有一个答案可以解决互联网上的所有问题.在花了无数个小时寻找这个问题的答案之后,我终于放弃了这个陈述.

假设

这有效:

s3.getSignedUrl('putObject', params);

我想做什么？

1. 使用getSignedUrl方法通过PUT(从客户端)将文件上载到Amazon S3
2. 允许任何人查看上传到S3的文件

注意:如果有一种更简单的方法允许客户端(iPhone)使用预先签名的URL上传到Amazon S3(并且没有公开客户端的凭据),我会全神贯注.

主要问题*

1. 查看AWS管理控制台时,上载的文件设置了空白权限和元数据.
2. 查看上载的文件时(即双击AWS管理控制台中的文件),我收到AccessDenied错误消息.

我试过了什么？

尝试#1:我的原始代码

在NodeJS中,我生成一个预先签名的URL,如下所示:

var params = {Bucket: mybucket, Key: "test.jpg", Expires: 600};
s3.getSignedUrl('putObject', params, function (err, url){
  console.log(url); // this is the pre-signed URL
});

预签名的URL看起来像这样:

https://mybucket.s3.amazonaws.com/test.jpg?AWSAccessKeyId=AABFBIAWAEAUKAYGAFAA&Expires=1391069292&Signature=u%2BrqUtt3t6BfKHAlbXcZcTJIOWQ%3D

现在我通过PUT上传文件

curl -v -T myimage.jpg https://mybucket.s3.amazonaws.com/test.jpg?AWSAccessKeyId=AABFBIAWAEAUKAYGAFAA&Expires=1391069292&Signature=u%2BrqUtt3t6BfKHAlbXcZcTJIOWQ%3D

问题
我得到上面列出的*主要问题

尝试#2:在PUT上添加内容类型和ACL

我也尝试在代码中添加Content-Type和x-amz-acl,方法是替换params,如下所示:

var params = {Bucket: mybucket, Key: "test.jpg", Expires: 600, ACL: "public-read-write", ContentType: "image/jpeg"};

然后我尝试了一个很好的'PUT:

curl -v -H "image/jpeg" -T myimage.jpg https://mybucket.s3.amazonaws.com/test.jpg?AWSAccessKeyId=AABFBIAWAEAUKAYGAFAA&Content-Type=image%2Fjpeg&Expires=1391068501&Signature=0yF%2BmzDhyU3g2hr%2BfIcVSnE22rY%3D&x-amz-acl=public-read-write

问题
我的终端输出一些错误:

-bash: Content-Type=image%2Fjpeg: …

我有一个画布,并借助它从中检索图像数据canvas.toDataURL('image/png').

问题: <input type="file" />想要filepath value而不是base64数据.

问题: 如何在<input type="file" />不将它们保存到本地文件系统的情况下将base64图像数据发送到服务器？

我的解决方法:尝试隐藏输入<input type="file" />,但服务器需要文件名属性

也许用XmlHttpRequest可以克服这个问题？