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