4

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

http://pastebin.com/PrfWaS3D

显然，这是非常精简的，但它确实包含我遇到的问题。在 POST 一个 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的表单隐藏输入快得多？

我为我冗长的帖子道歉，但我还是 Web 开发的新手，并不真正理解我的问题，因此在获取所有信息时很难简洁。

谢谢

4

2 回答 2

6

由于无论如何您都在使用一些现代的 JS API，因此使用以下方法可能会更好：

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

所以是这样的：

  1. 获取文件：
    file = input.files[0]
  2. 转换为类型化数组，做魔术，转换回 Blob：
    blob = <magic here>
  3. 创建 POST：
    fd = new FormData; fd.append('file', blob, 'image.png');
  4. 上传：
    xhr = new XMLHttpRequest; ... xhr.send(fd);
于 2013-08-31T16:39:15.370 回答
0 
 <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'].'" />';
于 2015-11-25T12:03:38.877 回答