[解決済み] クライアントサイドのJavaScriptでJPEGのEXIF回転データにアクセスする
2022-06-11 03:07:44
質問
私は、JPEG EXIF 画像データでカメラによって設定された、元の回転に基づいて写真を回転させたいと思っています。この処理はすべてブラウザ上で行わなければならず、JavaScript と
<canvas>
.
JavaScript はどのようにしてローカルファイル API オブジェクトである JPEG にアクセスすることができたのでしょうか。
<img>
またはリモートの
<img>
で、EXIFデータから回転情報を読み取ることができますか?
サーバーサイドの回答はOKではありません。私が探しているのは クライアント側の の解決策を探しています。
どのように解決するのですか?
orientationタグだけが必要で、他の巨大なjavascriptライブラリを入れたくない場合、できるだけ早くorientationタグを抽出する小さなコードを書きました(これはDataViewと
readAsArrayBuffer
を使いますが、古いブラウザ用に独自のデータリーダーを書くこともできます)。
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
Typescriptをお使いの方は、以下のコードをご利用ください。
export const getOrientation = (file: File, callback: Function) => {
var reader = new FileReader();
reader.onload = (event: ProgressEvent) => {
if (! event.target) {
return;
}
const file = event.target as FileReader;
const view = new DataView(file.result as ArrayBuffer);
if (view.getUint16(0, false) != 0xFFD8) {
return callback(-2);
}
const length = view.byteLength
let offset = 2;
while (offset < length)
{
if (view.getUint16(offset+2, false) <= 8) return callback(-1);
let marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
let little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
let 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));
}
}
} else if ((marker & 0xFF00) != 0xFF00) {
break;
}
else {
offset += view.getUint16(offset, false);
}
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
関連
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】ReactJSでエラー発生 Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptの変数のスコープとは何ですか?
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み] JSクライアントサイドのExif Orientation。JPEG画像の回転とミラーリング
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
fetch ネットワークリクエストラッパーの説明例
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vue ディレクティブ v-html と v-text
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
[解決済み] JSクライアントサイドのExif Orientation。JPEG画像の回転とミラーリング
-
[解決済み] ブラウザのJavascriptで画像を圧縮する方法を教えてください。
-
[解決済み] PNGはJPGのようにEXIFデータを含んでいますか?