js 前端图片压缩+ios图片角度旋转

step1:读取选择的图片，并转为base64；

function  ImgToBase64 (e, fn) {
        // 图片方向角
        //fn为传入的方法函数，在图片操作完成之后执行
        var Orientation = null;//ios选择上传图片是图片角度问题
        var base64 = false;
        var max_size = 480 * 1024;//单位B，图片最大尺寸
        var ratio = 0.99;
        if (window.File && window.FileList && window.FileReader && window.Blob) {
            e = e || window.event;
            e.stopPropagation(); // 阻止冒泡 
            e.preventDefault(); //阻止默认行为 
            var files = e.target.files;
            var f = files[0];//图片单张上传
            if (f) {
                var rFilter = /^(image/jpeg|image/png)$/i; // 检查图片格式
                if (!rFilter.test(f.type)) {
                    base64 = false;
                    $.m.fade("请选择jpeg、png格式的图片");
                    return;
                }
                //获取照片方向角属性ios
                //ios图片方向调整需要加载exif

                exif文件下载

                EXIF.getData(f, function () {
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');
                });
            }
            if (f.size < 10) {
                base64 = false;
                return;
            } else if (f.size > 1024 * 1024 * 10) {
                //10M
                base64 = false;
                $.m.fade("您选择的图片过大,请重新选择10M以内的图片!");
                return;
            }
            $.m.loading(true);

            var reader = new FileReader();
            var image = new Image;
            image.src = '';
            reader.onload = function () {
                image.src = this.result;
                image.onload = function () {
                    //生成canvas
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext('2d');
                    var w = image.naturalWidth,
                        h = image.naturalHeight;
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(image, 0, 0);//, w, h, 0, 0, w, h
                    if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
                        switch (Orientation) {
                            case 6://需要顺时针90度旋转
                                canvas.width = h;
                                canvas.height = w;
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(this, 0, -h);
                                break;
                            case 8://需要逆时针90度旋转
                                canvas.width = h;
                                canvas.height = w;
                                ctx.rotate(-90 * Math.PI / 180);
                                ctx.drawImage(this, -w, 0);
                                break;
                            case 3://需要180度旋转
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(this, -w, -h);
                                break;
                        }
                    }
                    compressImg(ratio);//压缩图片
                    function compressImg(_ratio) {
                        base64 = canvas.toDataURL("image/jpeg", _ratio);
                        var _f = base64ToBlob(base64, new Date().getTime());
                        //没有达到要求的图片尺寸时，反复压缩
                        if(_ratio>0.11 && _f.size > max_size){
                            var rr =parseFloat((_ratio - 0.11).toFixed(2)) ;
                            compressImg(rr);
                        }else if(_ratio<=0.11 && _ratio>0 && _f.size > max_size){
                            var rr =parseFloat((_ratio - 0.01).toFixed(2)) ;
                            compressImg(rr);
                        }else{
                            fn(base64);
                        }
                    }
                };
            }
            reader.readAsDataURL(f);
        }
    }

step2:将图片转成上传需要的文件格式（blob）；

function base64ToBlob (_data, timeTrap) {
        //window.atob方法将其中的base64格式的图片转换成二进制字符串；若将转换后的值直接赋值给Blob会报错，需Uint8Array转换：最后创建Blob对象；     
        //base64转blob
        _data = _data.split(',')[1];
        var binary = window.atob(_data);
        var len = binary.length;
        var buffer = new ArrayBuffer(len);
        var view = new Uint8Array(buffer);
        for (var i = 0; i < len; i++) {
            view[i] = binary.charCodeAt(i);
        }
        var blob = new Blob([view], { type: 'image/jpeg' });
        blob.name = timeTrap + '.jpg';//以时间戳给图片重命名
        return blob;
    }

step3:调用以上方法，小栗子：

页面布局：

 <div class="l-m-r">
                <span class="mtitle">选择图片</span>
                <span class="m"></span>
                <span class="right-text"> 
                    <div class="p-imgs">
                        <div class="top-bottom" id="img-upload">
                            <i class="iconfont yxticon-camera"></i>
                            <p>添加商品图</p>
                            <input class="file" image-file type="file"  accept="image/*,camera">

                        </div>
                    </div>
                </span>
            </div>

元素属性绑定事件：

'image-file': {
            evt: 'change',
            fun: function (e) {
                //选择了图片
                var _this = this;
                //input的file框onchange事件触发一次失效的新的解决方法
                $(this).remove();
                $('#img-upload').append('<input class="file" image-file type="file"  accept="image/*">')

                ImgToBase64(e, setHtmlFun);//调用step1
                function setHtmlFun(base64) {
                    $.m.loading(false);
                    if (params.file.length > 3) {
                        $.m.fade('图片最多只能上传4张！');
                        return;
                    }
                    var timeflag = new Date().getTime();
                    var blob =base64ToBlob(base64, timeflag);//调用step2 
                    params.file[params.file.length] = blob;//将文件存储到对应参数中

                    //图片展示
                    var ele = '
                    <div class="img">
                        <img src="'+ base64 + '">
                        <i class="iconfont yxticon-arrow-delete" delete-img data-name="'+ timeflag + '.jpg"  ></i>
                    </div>
                    '
                    $('#uploadImgs').append(ele);
                }
            }
        }