使用JS实现前端图片压缩预览

方法1

1.首选使用files来获取文件属性,使用URL.createObjectURL方法将file文件转换为一个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('上传图片格式错误','text');
        }
    });

2.使用canvas进行图片压缩

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来获取文件属性,使用HTML5的FileReader对象将file文件转换为一个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('上传图片格式错误','text');
    }
});

注意 在IOS上图片一旦大于5MB，会出现错误，这个时候需要将图片裁剪并进行绘制，也就是常说的瓦片绘制

var upload = document.getElementById('upload'),//上传
        pic = document.getElementById('pic'),//图片
        addBox = document.getElementById('add'),//空图片样式
        maxsize = 100* 1024,//超过100k进行压缩
        minSrc = '';//
        
    if (typeof(FileReader) === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        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图片进行压缩
            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像素无法用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),//分割的数量
                cvsWidth = width/count,//每个小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;
    }

兼容性问题：
由于这个方法使用了大量的浏览器新特性，导致IE10一下浏览器基本不兼容