在客戶端的JavaScript 中存取JPEG EXIF 旋轉資料
嵌入在JPEG 影像中的EXIF 資料包含有價值的信息,包括原始旋轉照片的。為了增強使用者體驗,開發人員通常需要存取此 EXIF 資料以進行自動旋轉調整。本文介紹了一個在客戶端檢索 JPEG EXIF 旋轉資料的 JavaScript 解決方案。
如何擷取JPEG EXIF 旋轉資料
要在JavaScript 中存取JPEG EXIF 數據,您可以採取以下步驟:
範例程式碼
以下是實現上述步驟的範例程式碼片段:
<code class="javascript">function getOrientation(file, callback) { // Read the JPEG file const reader = new FileReader(); reader.onload = function(e) { const arrayBuffer = e.target.result; // Parse the EXIF data const view = new DataView(arrayBuffer); if (view.getUint16(0, false) != 0xFFD8) { return callback(-2); // Not a JPEG file } let offset = 2; while (offset < arrayBuffer.byteLength) { if (view.getUint16(offset + 2, false) <= 8) return callback(-1); // Invalid JPEG file const marker = view.getUint16(offset, false); offset += 2; if (marker == 0xFFE1) { if (view.getUint32(offset += 2, false) != 0x45786966) { return callback(-1); // Not an EXIF header } // Find the orientation tag const little = view.getUint16(offset += 6, false) == 0x4949; offset += view.getUint32(offset + 4, little); const tags = view.getUint16(offset, little); offset += 2; for (let i = 0; i < tags; i++) { if (view.getUint16(offset + (i * 12), little) == 0x0112) { return callback(view.getUint16(offset + (i * 12) + 8, little)); // Found the orientation tag } } } else if ((marker & 0xFF00) != 0xFF00) { break; // Not a valid JPEG marker } else { offset += view.getUint16(offset, false); // Skip the rest of the segment } } return callback(-1); // Orientation tag not found }; reader.readAsArrayBuffer(file); } // Usage: const input = document.getElementById('input'); input.onchange = function(e) { getOrientation(input.files[0], function(orientation) { alert('Orientation: ' + orientation); }); };</code>
此程式碼片段可以整合到您的Web 應用程式中以檢索和處理JPEG EXIF 旋轉數據,可讓您根據照片在客戶端的原始方向旋轉照片。
以上是如何在客戶端的 JavaScript 中提取 JPEG EXIF 旋轉資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!