使用Ajax上传base64映像

Question

我的客户端正在为用户提供选择图片,裁剪并调整大小,然后显示它(在<img>DOM元素中).
如果图片没问题,用户可以将其上传到服务器,以便保存.

由于Ajax请求,我想上传.

我在互联网上找到了大量的例子来上传从客户端PC检索到的原始图像.例如:

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

如果我决定上传通过表单输入检索的图片,这可以正常工作.

在我的情况下,我想上传修改后的图片(保存在<img>元素中)而不是原始图片.
此图片存储为base64图片(有关信息:我使用croppie.js库生成图像).

我不知道如何使用Ajax上传这张图片.

我试图将其作为常规参数上传,但在服务器端,img是一个空字符串:

var url = 'http://host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');

$.ajax({url: url, type: "POST", data: data})
  .done(function(e){
    // Do something
  });
// RESULTS in a empty data.img on the server side.

我的问题是在检索"img"参数时服务器具有空字符串.我怀疑图像可能太大而无法传递到服务器或其他一些我不理解的问题....

所以我想知道在没有使用表单的情况下使用Ajax请求将base64映像发送到服务器的正确方法是什么.

谢谢你的帮助.

编辑

似乎是xmlHTTP POST参数大小问题.我试图减少图像的字符串表示的字符数,服务器现在能够检索它.

EDIT2

post_max_size在php.ini文件中设置为8M,而图片大小仅为24K.所以问题不存在.
我正在使用PHP与Symfony2框架.
可能是Symfony2的限制.

Answer 1

我最终决定将base64映像转换为Blob,因此可以通过带有formData对象的Ajax请求发送它,如下所示.它节省了上传带宽(base64比其二进制等效项多占33%)并且我找不到没有传输base64参数的原因(由于某些地方的大小限制肯定).

base64ToBlob函数基于对另一个问题的这个答案.

function base64ToBlob(base64, mime) 
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

我的JS代码:

var url = "url/action";                
var image = $('#image-id').attr('src');
var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
var blob = base64ToBlob(base64ImageContent, 'image/png');                
var formData = new FormData();
formData.append('picture', blob);

$.ajax({
    url: url, 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData})
        .done(function(e){
            alert('done!');
        });

在Symfony2中,我可以通过以下方式检索图像:

$picture = $request->files->get('picture');