前端实现手机相册或照相预览图片及压缩图片的方法

总体思路是：
1、FileReader.readAsDataURL将上传的图片文件转为Base64格式
2、将img绘制到canvas上，canvas.toDataURL压缩图片
3、new Blob将压缩后的Base64转为Blob格式
4、FormData.append将图片文件数据存入formdata

 

var   upAvatarInput = document.getElementById('up-avatar-input'),

            avatarImg = document.getElementsByClassName('avatar')[0] ;

 

        // 图片预览

        var file;

        var MAX_IMG_SIZE=3*1024*1024;

// upAvatarInput为input file 原生元素

        upAvatarInput.onchange = function (ev) {

            var files = this.files;

            file= files[0];

            var reader;

            // 接受 jpeg, jpg, png 类型的图片

            if (!//(?:jpeg|jpg|png)/i.test(file.type)) {

                alert('抱歉，暂时只支持jpeg, jpg, png格式的图片。')

                return

            }

            if(typeof (FileReader) === 'undefined'){

                alert('抱歉，您的浏览器不支持FileReader功能，请更换浏览器')

            }else {

           reader = new FileReader();

            reader.onload = function (e) {

                var result = this.result;

                // 获取文件大小  单位为bit

                var imgSize=e.total;

                avatarImg.src = result;

                // 清空图片上传框的值

                upAvatarInput.value = '';

    //    定义 已经被压缩 变量  否则进入死循环

                var hasCompressed=false;

                avatarImg.onload=function () {

                    // 获取图片的宽度 并修改‘点击上传证件照’的宽度

                    setUpImgWidth()

                //  压缩图片

                    if (hasCompressed){

                        return

                    }

                    judgeCompress(avatarImg,imgSize);

                    hasCompressed=true;

                }

            };

            reader.readAsDataURL(file); // 将上传的文件图片转为Base64

}

        };

 

 

        // 判断及压缩

        function judgeCompress(img,imgSize) {

            if (imgSize>MAX_IMG_SIZE){

                        try {

                    img.src = compressImg(img);

                }catch (err){

                    alert('抱歉，执行compressImg函数出错'+err)

                }

                //去掉url的头，并转换为byte

                var bytes = window.atob(img.src.split(',')[1]);

                //处理异常,将ascii码小于0的转换为大于0

                var ab = new ArrayBuffer(bytes.length);

                var ia = new Uint8Array(ab);

                for (var i = 0; i < bytes.length; i++) {

                    ia[i] = bytes.charCodeAt(i);

                }

              //   file = new Blob( [ab] , {type : 'image/jpeg'});

             file = new Blob( [ia] , {type : 'image/jpeg'});

                file.name = '上传图片.jpeg';

                alert('图片大于8M，已经进行压缩处理')

                return img;

            }else {

                return img

            }

        }

 

 

        // 压缩图片

        function compressImg(image) {

            console.log('compress');

            console.log(image)

 

            var canvas = document.createElement('canvas')

            var ctx = canvas.getContext('2d');

 

            var imageLength = image.src.length;

            var width = image.width;

            var height = image.height;

 

            canvas.width = width;

            canvas.height = height;

 

            ctx.drawImage(image, 0, 0, width, height);

 

            //压缩操作

            var quality = 1;//图片质量  范围：0<quality<=1 根据实际需求调正

            var imageData = canvas.toDataURL("image/jpeg", quality); //  把canvas画布转换成img图像  将图片转换成base64格式 另外: png 不支持quality参数 所以写死image/jpeg

 

            console.log("压缩前：" + imageLength);

            console.log("压缩后：" + imageData.length);

            console.log("压缩率：" + ~~(100 * (imageLength - imageData.length) / imageLength) + "%");

            return imageData;

        }