JS获取图片的EXIF信息+纠正图片方向

可使用exif.js插件获得图片的EXIF信息
直接引用 http://cdn.muops.cn/js/exif.js

然后使用一下代码可以获取Orientation信息，并纠正Orientation带来的图片旋转问题

// @param {Obj} file 图片file对象
// @param {string} ImgObj img标签对象
function saveImg(file, ImgObj) {
    var orientation;
    //EXIF js 可以读取图片的元信息
    EXIF.getData(file, function () {
        orientation = EXIF.getTag(this, 'Orientation');//获取Orientation信息

        var reader = new FileReader();
        reader.onload = function (e) {
            getImgData(this.result, orientation, function (data) {
                //这里可以使用校正后的图片data了
                ImgObj.src = data;
            });
        }
        reader.readAsDataURL(file);
    });
}

// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法，返回校正方向后的base64
function getImgData(img, dir, next) {
    var image = new Image();
    image.onload = function () {
        var degree = 0, drawWidth, drawHeight, width, height;
        drawWidth = this.naturalWidth;
        drawHeight = this.naturalHeight;
        //以下改变一下图片大小
        var maxSide = Math.max(drawWidth, drawHeight);
        if (maxSide > 1024) {
            var minSide = Math.min(drawWidth, drawHeight);
            minSide = minSide / maxSide * 1024;
            maxSide = 1024;
            if (drawWidth > drawHeight) {
                drawWidth = maxSide;
                drawHeight = minSide;
            } else {
                drawWidth = minSide;
                drawHeight = maxSide;
            }
        }
        var canvas = document.createElement('canvas');
        canvas.width = width = drawWidth;
        canvas.height = height = drawHeight;
        var context = canvas.getContext('2d');
        //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
        switch (dir) {
            //iphone横屏拍摄，此时home键在左侧 
            case 3:
                degree = 180;
                drawWidth = -width;
                drawHeight = -height;
                break;
            //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向) 
            case 6:
                canvas.width = height;
                canvas.height = width;
                degree = 90;
                drawWidth = width;
                drawHeight = -height;
                break;
            //iphone竖屏拍摄，此时home键在上方 
            case 8:
                canvas.width = height;
                canvas.height = width;
                degree = 270;
                drawWidth = -width;
                drawHeight = height;
                break;
        }
        //使用canvas旋转校正
        context.rotate(degree * Math.PI / 180);
        context.drawImage(this, 0, 0, drawWidth, drawHeight);
        //返回校正图片
        next(canvas.toDataURL("image/png"));
    }
    image.src = img;
}

附上Exif.js的API

EXIF 标识