Question

我正在开发一个网站，允许用户编辑照片（在浏览器中），然后上传它们。要在浏览器中编辑图像，我使用一些JavaScript库来处理base64中的图像。因此，要将图像POST到我的服务器，不能使用带有文件输入的简单表单。隐藏输入的值设置为已编辑图像的base64字符串，即POSTed。请参阅以下简短示例。

http://pastebin.com/PrfWaS3D

显然，这是非常简单的，但它确实包含了我遇到的问题。在发布3MB动画GIF时，花了6.5分钟。在此期间，我的电脑几乎完全冻结/反应迟钝。（注意：这对于小图像来说完全）

这可能是操作系统/浏览器问题，（Ubuntu上的最新Google Chrome）但我对此表示怀疑。如果我将该文件输入放在表单中，并删除base64-ing数据（即 - 文件的标准POST），则大约需要一秒钟。

比较6.5分钟到1秒。我必须做错事。我在这做错了什么？我应该做什么呢？我对网络开发很新，所以我有点不知所措。我知道base64确实会产生1.3倍的大小增加，但显然这里的上传时间不会缩放1.3倍。我做了一些console.logging和

var base64 = reader.result;

需要大约一秒钟。所以我认为瓶颈并不存在。瓶颈必须在上传中。但为什么？为什么表单文件输入如此比使用base64的表单隐藏输入快得多？

我为我长篇大论的帖子道歉，但同样，我是网络开发的新手，并且

由于

Answer 1

因为你无论如何都使用了一些现代的JS API，所以最好使用：

URL.createObjectURL()从Blob创建URL（比数据URL快得多，可检查）
btoa()对base64编码一个字符串（不再需要）
FormData创建POST请求
XHR2将其发送到服务器（甚至包括进度！）

这样的事情：

获取档案：
file = input.files[0]
转换为类型数组，执行魔术，转换回Blob：
blob = <magic here>
创建POST：
fd = new FormData; fd.append('file', blob, 'image.png');
上载：
xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

 <form action="1.php" method="post">
     <input type="text" id="txt" name="txt">
     <input type="submit" value="submit" >
 </form>


function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}
convertToDataURLviaCanvas('1.jpg', function(base64Img){
    console.log(base64Img);
    document.getElementById('txt').value= base64Img;
});

1.PHP

echo '<img src="'.$_POST['txt'].'" />';

POST base64数据JavaScript / jQuery

2 个答案: