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); } } }