使用ajax将img标签中的内容上传到后台

目录

问题

解决方案

前端这样写

后台这样写

---

问题

　　大家都知道在java web项目开发中，上传文件只需要设置<input type="file">之类的就可以了，不过我这边指的不是这个，是将img标签中的base64图像上传到java后台，这样用以前的方法后台就什么也接收不到了。

解决方案

假设已经有一张图片显示在img标签中，如，现在需要把src中的base64字符串上传到java后台，接收并用做其它的图像处理。

前端这样写

var background ;//你需要传输的其它参数

var reader = new FileReader();
reader.readAsDataURL(base64ToBlob($("#matImage").attr('src')));
reader.onload = function(e) {
    var event = this;
    var param = "{\"background\":\""+background+"\",\"src\":\""+event.result+"\"}";
    $.ajax({
        type: 'POST',
        contentType:"application/json;charset=utf-8",
        url: '/synthesizeJPEGImage',
        dataType: "json",
        data: param,
        processData:false,
        success: function(data) {
            if (data.code == 0){
                downloadFile(new Date().getTime()+".jpg", "data:image/png;base64,"+data.image);
            }else{
                console.log(data.code);
            }
        }
    });
};

//base64转blob
function base64ToBlob(code) {
    var parts = code.split(';base64,');
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
}

后台这样写

后台这样接收就可以了，至于为什么不用request.getParameter（），实践证明，图像比较小的时候（小于100KB）时，通过request.getParameter（）可以接到到图像，图像比较大时，后台就什么也接收不到了，用这样方法就可以。
最后，如果有什么问题欢迎大家多多交流。