图片上传相关操作

记录下图片上传的相关操作，File 文件转base64,base64格式转二进制流

获取图片路径

var file = e.target.files[0];

function getFullPath(file) {
    window.URL = window.URL || window.webkitURL;
    if (window.URL && window.URL.createObjectURL) {
        return window.URL.createObjectURL(file);
    } else {
        return null;
    }
}

用canvas方法获取图片的base64

/*
    传入File格式,返回base64格式数据
*/
function getThumbnail(file, area, callback) {
    var canvas = document.createElement("canvas"),
        context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        var target_w;
        var target_h;
        var imgarea = img.width * img.height;
        if (imgarea > area) {
            var scale = Math.sqrt(imgarea / area);
            scale = Math.ceil(scale * 100) / 100;
            target_w = img.width / scale;
            target_h = img.height / scale;
        } else {
            target_w = img.width;
            target_h = img.height;
        }
        canvas.width = target_w;
        canvas.height = target_h;
        context.drawImage(img, 0, 0, target_w, target_h);
        try {
            var base64Data = canvas.toDataURL("image/jpeg", 0.5);
            callback(file, base64Data);
        } catch (e) {
            callback(file, null);
        }
    };
    img.src = this.getFullPath(file);
}

base64转二进制流

/*
    传入base64格式数据
*/
function dataURItoBlob(base64Data) {
    var byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')[1]);
    else byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: mimeString
    });
}

最后将二进制流通过ajax传个后端。跟使用File格式传数据相似，先转成formDate格式，这里我使用了一个空的form标签，来代替<input type="file" > 标签。

<form id="upForm"></form>

var blob = that.dataURItoBlob(base64Url),
    fd = new FormData($('#upForm')[0]);
fd.append("imageFile", blob, 'image.png');