在客户端以JavaScript访问JPEG EXIF循环数据 [英] Accessing JPEG EXIF rotation data in JavaScript on the client side

问题描述

我想根据相机在JPEG EXIF图像数据中设置的原始旋转来旋转照片。诀窍是所有这一切都应该在浏览器中进行，使用JavaScript和< canvas> 。

I'd like to rotate photos based on their original rotation, as set by the camera in JPEG EXIF image data. The trick is that all this should happen in the browser, using JavaScript and <canvas>.

怎么可能JavaScript访问JPEG，本地文件API对象，本地< img> 或远程< img> ，EXIF数据读取轮换信息？

How could JavaScript access JPEG, a local file API object, local <img> or remote <img>, EXIF data to read the rotation information?

服务器端答案不正确;我正在寻找客户端解决方案。

Server-side answers are not OK; I am looking for a client-side solution.

推荐答案

如果你只想要方向标记而没有别的东西而又不想包含另一个巨大的javascript库我会写一点尽可能快地提取方向标记的代码（它使用IE11 +中提供的DataView和 readAsArrayBuffer ，但您可以为旧浏览器编写自己的数据阅读器）：

If you only want the orientation tag and nothing else and don't like to include another huge javascript library I write a little code that extract only orientation tag as fast as possible (It uses DataView and readAsArrayBuffer which are available in IE10+, but you can write your own data reader for older browsers):

function getOrientation(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {

        var view = new DataView(e.target.result);
        if (view.getUint16(0, false) != 0xFFD8)
        {
            return callback(-2);
        }
        var length = view.byteLength, offset = 2;
        while (offset < length) 
        {
            if (view.getUint16(offset+2, false) <= 8) return callback(-1);
            var marker = view.getUint16(offset, false);
            offset += 2;
            if (marker == 0xFFE1) 
            {
                if (view.getUint32(offset += 2, false) != 0x45786966) 
                {
                    return callback(-1);
                }

                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;
                for (var i = 0; i < tags; i++)
                {
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                    {
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
                    }
                }
            }
            else if ((marker & 0xFF00) != 0xFF00)
            {
                break;
            }
            else
            { 
                offset += view.getUint16(offset, false);
            }
        }
        return callback(-1);
    };
    reader.readAsArrayBuffer(file);
}

// usage:
var input = document.getElementById('input');
input.onchange = function(e) {
    getOrientation(input.files[0], function(orientation) {
        alert('orientation: ' + orientation);
    });
}

<input id='input' type='file' />

值：

-2: not jpeg
-1: not defined

这篇关于在客户端以JavaScript访问JPEG EXIF循环数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！