Javascript实现拍照上传压缩，旋转

使用exif.js实现拍照上传并压缩旋转

1.先引入必须的文件

<script src="jquery.js"></script><script src="exif-2.3.0.js"></script><script src="pressImg.js"></script>

2.html代码

<input type="file" id="choose" accept="image/*"><div id="box"></div>

3.main.js文件实现拍照上传，加压缩旋转

var filechooser = document.getElementById("choose");var maxsize = 512 * 1024;//1kb = 1024B(字节)filechooser.onchange = function() {    var file = this.files[0];    EXIF.getData(file, function(){        EXIF.getAllTags(this);        EXIF.getTag(this, 'Orientation');        console.log("最初的file对象");        console.log(file);        var size = file.size;//获取图片大小        var reader = new FileReader();        reader.onload = function(){            var result = this.result;//base64图片字符串            var img = new Image();            img.src = result;            //如果图片大小小于等于512kb时，则直接上传            if (size <= maxsize) {                console.log("小于512kb时的上传");                console.log(img);                //旋转操作                obj.rotateImg(file,img);                img = null;                //上传                   return;//完成结束            };            //图片加载完毕之后进行压缩，然后上传            if(img.complete) {                callback();            }else {                img.onload = callback;            };            function callback() {                var data = obj.pressImg(img);                console.log("压缩后的图片(base64字符串)");                //将压缩后的base64字符串重新转为file对象                var newimgFile = obj.convertBase64UrlToBlob(data);                console.log(newimgFile);                //上传                //完成后置空                img = null;                //在页面中展示图片(展示效果用)                var img1 = new Image();                img1.id="imgCover";                img1.src = data;                console.log(img1);                //旋转操作                obj.rotateImg(file,img1);                //最后展示                $("#box").html(img1);            };        };        reader.readAsDataURL(file);    });};

4.核心文件：

var obj = {    /**     * 用于对图片进行压缩上传     */    pressImg: function(img){//img指图片格式为base64字符串的图片        //用于压缩图片的canvas        var canvas = document.createElement("canvas");        var ctx = canvas.getContext('2d');        //瓦片canvas        var tCanvas = document.createElement("canvas");        var tctx = tCanvas.getContext("2d");        var initSize = img.src.length;        var width = img.width;        var height = img.height;        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下        var ratio;        if((ratio = width * height / 4000000) > 1) {            ratio = Math.sqrt(ratio);            width /= ratio;            height /= ratio;        } else {            ratio = 1;        }        canvas.width = width;        canvas.height = height;        //铺底色        ctx.fillStyle = "#fff";        ctx.fillRect(0, 0, canvas.width, canvas.height);        //如果图片像素大于100万则使用瓦片绘制        var count;        if ((count = width * height / 1000000) > 1) {            count = (Math.sqrt(count) + 1); //计算要分成多少块瓦片(计算平方根)            //计算每块瓦片的宽和高            var nw = (width / count);            var nh = (height / count);            tCanvas.width = nw;            tCanvas.height = nh;            for (var i = 0; i < count; i++) {                for (var j = 0; j < count; j++) {                    tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);                }            }        } else {            ctx.drawImage(img, 0, 0, width, height);        }        //进行最小压缩        var ndata = canvas.toDataURL('image/jpeg', 0.5);//改变这里的参数即可改变压缩率。(例如：0.1)        console.log('压缩前：' + initSize);        console.log('压缩后：' + ndata.length);        console.log('压缩率：' + (100 * (initSize - ndata.length) / initSize) + "%");        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;        return ndata;    },    /**     * 用于将得到的base64位的字符串图片转化为file对象     */    convertBase64UrlToBlob: function(urlData){        var bytes=window.atob(urlData.split(',')[1]);//去掉url的头，并转换为byte          //处理异常,将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);        };        return new Blob( [ab] , {type : 'image/png'});    },    /*用于对图片进行旋转操作*/    rotateImg: function(imgFile,imgObj){        console.log(imgFile.exifdata.Orientation);        switch(imgFile.exifdata.Orientation){            case 8:                //需要向左旋转90度。                console.log($(imgObj));                $(imgObj).css("transform","rotate(-90deg)");                break;            case 3:                //需要向右旋转180度。                console.log($(imgObj));                $(imgObj).css("transform","rotate(180deg)");                break;            case 6:                //需要向右旋转90度。                console.log($(imgObj));                $(imgObj).css("transform","rotate(90deg)");                break;            case 1:                //不需要旋转                break;        }    }}