张贴base64数据JavaScript/jQuery

POSTing base64 data JavaScript/jQuery

本文关键字：jQuery JavaScript 数据 base64 张贴      更新时间：2023-09-26

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

http://pastebin.com/PrfWaS3D

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

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

将6.5分钟与1秒进行比较。我一定是做错了什么。我在这里做错了什么？我该怎么办？我对网络开发还很陌生，所以我有点蒙在鼓里。我知道base64的大小确实增加了1.3倍，但很明显，这里的上传时间并没有按1.3倍扩展

var base64 = reader.result;

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

我为我的长篇大论道歉，但再次强调，我是网络开发的新手，并不真正理解我的问题，所以在理解所有信息的同时很难做到简明扼要。

感谢

由于您无论如何都在使用现代的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);
 <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'].'" />';
相关文章：