方法1

1.首選使用files來(lái)獲取文件屬性,使用URL.createObjectURL方法將file文件轉(zhuǎn)換為一個(gè)URL地址

$('.weui-uploader__input').on('change',function(){
        var file = this.files[0];
        if(file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png'){
            var U =URL.createObjectURL(file);
            compressImage(U);
        }else{
            $.toast('上傳圖片格式錯(cuò)誤','text');
        }
    });

2.使用canvas進(jìn)行圖片壓縮

function compressImage(url) {
    var cvs = document.createElement('canvas');
    var ctx = cvs.getContext('2d');
    var img = new window.Image();
    img.src = url;
    img.onload = function(){
        var _this = this;
        cvs.width = img.width
        cvs.height = img.height
        setTimeout(function(){
            ctx.drawImage(img, 0, 0, cvs.width, cvs.height)
            _this.newImageData = cvs.toDataURL('image/jpeg', 0.1);
            $('.tx').attr('src',_this.newImageData);
            $('#img-path').val(_this.newImageData);
            
        }, 0)
        this.showPreviewer = true
    }
}

方法2

1.首選使用files來(lái)獲取文件屬性,使用HTML5的FileReader對(duì)象將file文件轉(zhuǎn)換為一個(gè)URL地址

$('.weui-uploader__input').on('change',function(){
    var file = this.files[0];
    if(file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png'){
        var fileReader = new FileReader();
        var U =reader.readAsDataURL(file);
        compressImage(U);
    }else{
        $.toast('上傳圖片格式錯(cuò)誤','text');
    }
});

注意 在IOS上圖片一旦大于5MB禽额，會(huì)出現(xiàn)錯(cuò)誤钱反，這個(gè)時(shí)候需要將圖片裁剪并進(jìn)行繪制，也就是常說(shuō)的瓦片繪制

var upload = document.getElementById('upload'),//上傳
        pic = document.getElementById('pic'),//圖片
        addBox = document.getElementById('add'),//空?qǐng)D片樣式
        maxsize = 100* 1024,//超過(guò)100k進(jìn)行壓縮
        minSrc = '';//
        
    if (typeof(FileReader) === 'undefined') {
        alert("抱歉飞主，你的瀏覽器不支持 FileReader琉朽，請(qǐng)使用現(xiàn)代瀏覽器操作域帐！");
        upload.setAttribute('disabled', 'disabled');
    }
    
    
    upload.addEventListener('change', function(){
        addBox.style.display = 'none';
        pic.style.display = 'block';
        var file = this.files[0],
            result = '',
            reader = new FileReader();
        if(file){
            pic.setAttribute('src','loading.gif');
        }
        reader.readAsDataURL(file);
        reader.onload = function(e){
            var v =　this.result;//獲取到base64的圖片
            img = new Image();
            img.src = v;
            //大于100k圖片進(jìn)行壓縮
            if(v.length>=maxsize){
                img.onload = function(){
                    minSrc = compress(img,600,100);
                    pic.setAttribute('src',minSrc);
                    //ajax minSrc
                }
            }else{
                pic.setAttribute('src',v);
                //ajax v
            }
        }
    });
    
    function compress(sourceImg,proportion,quality){
        var area = sourceImg.width * sourceImg.height,//源圖片的總大小
            height = sourceImg.height * proportion,
            width = sourceImg.width * proportion,
            compressCvs = document.createElement('canvas');//壓縮的圖片畫布
        //壓縮的圖片配置寬高
        compressCvs.width = width;
        compressCvs.height = height;
        var compressCtx = compressCvs.getContext("2d");
        //解決ios 圖片大于2000000像素?zé)o法用drawImage的bug
        if(area > 2000000 && navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
            //瓦片繪制
            var smallCvs = document.createElement("canvas"),
                smallCtx = smallCvs.getContext("2d"),
                count = Math.ceil(area / 1000000),//分割的數(shù)量
                cvsWidth = width/count,//每個(gè)小canvas的寬度
                picWidth = sourceImg.width/count;//分割成小圖片的寬度
            smallCvs.height = compressCvs.height;
            smallCvs.width =  width/count;
            
            //拼湊成大的canvas
            for(var i = 0;i < count;i++){
                smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height);
                compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height);
            }
        }else{
            compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height);
        }
        var newUrl = compressCvs.toDataURL('image/jpeg',quality/100);
        return newUrl;
    }

兼容性問(wèn)題：
由于這個(gè)方法使用了大量的瀏覽器新特性，導(dǎo)致IE10一下瀏覽器基本不兼容