能够根据相机捕获并存储在 JPEG EXIF 中的原始方向旋转照片数据对于确保正确显示至关重要。这可以完全在客户端使用 JavaScript 和
如何在 JavaScript 中提取 EXIF 方向数据
要访问 EXIF 方向数据,JavaScript 可以利用能够读取本地文件 API 对象、本地图像的方法() 或远程图像 ()。其中一种方法是 FileReader 对象,它允许将文件作为数组读取。
这是一个利用 FileReader 从 JPEG 文件中提取方向标签的特定函数:
<code class="javascript">function getOrientation(file, callback) { var reader = new FileReader(); reader.onload = function(e) { var view = new DataView(e.target.result); // Check for "SOI" ("Start of Image") marker if (view.getUint16(0, false) != 0xFFD8) return callback(-2); // Calculate offset to APP1 marker 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; // Check for APP1 marker if (marker == 0xFFE1) { // Check for "Exif" signature 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; // Search for Orientation tag 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); }
用法示例
要使用提供的功能,您可以利用文件输入元素的输入事件:
<code class="javascript">var input = document.getElementById('input'); input.onchange = function(e) { getOrientation(input.files[0], function(orientation) { alert('orientation: ' + orientation); }); }
HTML
<code class="html"><input id='input' type='file' /></code>
以上是如何使用 JavaScript 从 JPEG 文件中提取 EXIF 方向数据?的详细内容。更多信息请关注PHP中文网其他相关文章!