JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度 搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)

/** 将base64转换为文件对象
 *  @param {String} base64 base64字符串
 * */
var convertBase64ToBlob = function(base64){
    var base64Arr = base64.split(',');
    var imgtype = '';
    var base64String = ''if(base64Arr.length > 1){
        //如果是图片base64，去掉头信息
        base64String = base64Arr[1];
        imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';'));
    }
     将base64解码
    var bytes = atob(base64String);
    var bytes = base64;
    var bytesCode = new ArrayBuffer(bytes.length);
      转换为类型化数组
    var byteArray =  Uint8Array(bytesCode);
    
     将base64转换为ascii码
    for (var i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);
    }
   
     生成Blob对象（文件对象）
    return  Blob( [bytesCode],{type : imgtype});
};

* 压缩图片
 * @param {Object} file 上传对象files[0]
 * @param {Object} options 压缩设置对象
 * @param {Function} callback 回调函数
 * @result {Object} 返回blob文件对象
 * var compressImg = (file,options,callback){
    var self = thisvar imgname = file.name;
    var imgtype = (imgname.substring(imgname.lastIndexOf('.') + 1)).toLowerCase();
    if(imgtype == 'jpg' || imgtype == 'jpeg'){
        imgtype = 'image/jpeg';
    }else{
        imgtype = 'image/png';
    }
     用FileReader读取文件
    var reader =  FileReader();
     将图片读取为base64
    reader.readAsDataURL(file);
    reader.onload = (evt){
        var base64 = evt.target.result;
         创建图片对象
        var img =  Image();
         用图片对象加载读入的base64
        img.src = base64;
        img.onload =  () {
            var that = ,canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');
            canvas.setAttribute('width' 将图片画入canvas
            ctx.drawImage(that,0 压缩到指定体积以下（M）
            if(options.size){
                var scale = 0.9;
                ( f(scale){
                    if(base64.length / 1024 / 1024 > options.size && scale > 0){
                        base64 = canvas.toDataURL(imgtype,scale);
                        scale = scale - 0.1;
                        f(scale);
                    }{
                        callback(base64);
                        
                    }
                })(scale); 
            } else (options.scale){
                 按比率压缩
                base64 =
*
 * 图片预览
 * @param {Object} $fileInput 文件上传file
 * @param {Object} $previewImg 预览图片的image元素
  previewImg($fileInput,$previewImg) {
    $fileInput.onchange =  ($event) {
        var $target = $event.target;
        if ($target.files && $target.files[0]) {
             FileReader();
            reader.onload = (evt){
                $previewImg.src = evt.target.result;
            }
            reader.readAsDataURL($target.files[0]);
        }
    }
}

*
 * 将图片旋转到正确的角度
 * （解决移动端上传的图片角度不正确的问题）
 * （旋转后返回的是base64，可以参照本目录下的convertBase64ToBlob.js，将base64还原为file input读取得到的文件对象）
 * @param {Dom Object} $fileInput 文件上传输入框
 * @param {Function} callback 旋转完成后的回调函数
  resetImgOrientation($fileInput,callback) {
     绑定change事件
    $fileInput.onchange =  获取图片旋转角度
            getOrientation($target.files[0], (orientation) {
                 FileReader();
                reader.readAsDataURL($target.files[0]);
                reader.onload = (evt){
                     evt.target.result;
                     将图片旋转到正确的角度
                    resetOrientation(base64,orientation,1)"> (resultBase64) {
                        callback(resultBase64);
                    });
                }
            });
        }
    }
}

 获取图片旋转的角度
 getOrientation(file,1)"> FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (e) {
        var view =  DataView(e.target.result);
        if (view.getUint16(0,1)">false) != 0xFFD8) return callback(-2);
        var length = view.byteLength,offset = 2;
        while (offset < length) {
            var marker = view.getUint16(offset,1)">false);
            offset += 2;
            if (marker == 0xFFE1) {
                if (view.getUint32(offset += 2,1)">false) != 0x45786966) return callback(-1);
                var little = view.getUint16(offset += 6,1)">false) == 0x4949;
                offset += view.getUint32(offset + 4var tags = view.getUint16(offset,little);
                offset += 2;
                var i = 0; i < tags; i++)
                    if (view.getUint16(offset + (i * 12),little) == 0x0112)
                        return callback(view.getUint16(offset + (i * 12) + 8if ((marker & 0xFF00) != 0xFF00) breakelse offset += view.getUint16(offset,1)">);
        }
        );
    };
}
 将图片旋转到正确的角度
 resetOrientation(srcBase64,srcOrientation,1)"> Image();
    img.onload = () {
        var width = img.width,height = img.height,ctx = canvas.getContext("2d" set proper canvas dimensions before transform & export
        if ([5,6,7,8].indexOf(srcOrientation) > -1) {
            canvas.width = height;
            canvas.height = width;
        }  {
            canvas.width = width;
            canvas.height = height;
        }
         transform context before drawing image
        switch (srcOrientation) {
            case 2: ctx.transform(-1,1,width,0); case 3: ctx.transform(-1,-1,height ); case 4: ctx.transform(1,1)">case 5: ctx.transform(0,1)">case 6: ctx.transform(0,height,1)">case 7: ctx.transform(0,width); case 8: ctx.transform(0,1)">default: ctx.transform(1,1)"> draw image
        ctx.drawImage(img,1)"> export base64
        callback(canvas.toDataURL('image/jpeg'));
    };
    img.src = srcBase64;
};