ホームページ > 記事 > ウェブフロントエンド > クライアント側のJavaScriptでJPEG EXIF回転データを抽出するにはどうすればよいですか?
クライアント側の 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 中国語 Web サイトの他の関連記事を参照してください。