web-dev-qa-db-ja.com

jpeg exifオリエンテーションを尊重するようブラウザに指示する方法はありますか？

ブラウザでJPGファイルの自動回転が無効になっていることを知っています。

一部のWebサイトのレイアウトを壊してしまうため、有効にすることはできません。

CSSプロパティはありますか？またはそれを達成するためのJavaScriptコード？または、他の何か？それとも、この問題の解決策がまだ存在しないのでしょうか？

htmlcssbrowserjpegexif
35
Marc MAURICE

CSS画像の向き：from-image

仕様から https://www.w3.org/TR/css4-images/#the-image-orientation

6.2。ページ上の画像の方向：「image-orientation」プロパティ

画像の向き：from-image

from-image：画像のメタデータで指定された方向（EXIFなど）がある場合、この値は、画像を正しく方向付けるためにメタデータで指定されている角度に計算されます。必要に応じて、この角度は、値について上記で説明したように丸められ、正規化されます。メタデータで方向が指定されていない場合、この値は「0deg」と計算されます。

一致するChrome-Issue： https://bugs.chromium.org/p/chromium/issues/detail?id=15875

しかし、ブラウザのサポートはまだここにありません： https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

JS経由で回転

これを行うJSスニペットがあります： https://Gist.github.com/runeb/c11f864cd7ead969a5f

私の結論

Imagemagickなどのツールを使用してサーバー上の画像を回転させると、オーバーヘッドが大きくなりすぎると思います。

ブラウザは画像を回転できますが、Webアプリケーションはこれを明示的に回転する方法をアドバイスする必要があります。

ブラウザの回転におけるこの明示的な処理は、次のように実行できます。 https://stackoverflow.com/a/11832483/633961

30
guettli

画像を回転させる小さなphpスクリプトを書きました。リクエストごとに再計算するだけで、画像を保存してください。

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

乾杯

4
Thom

前のポスターで述べたように、画像自体を回転させる必要があります。ただし、その隣に、EXIFで回転タグを設定/リセットすることもできます。そうすれば、方向タグを尊重する視聴者が再び回転することを回避できます。 EXIFを編集できるツールは ExifTool と呼ばれ、無料です。

1
Jeroen Kransen

ツールexifautotranを事前に使用して、EXIFの向きをデフォルトの向き（1、「左上」）、画像が自動的に回転して、画像が変換前と同じように見えるようにします。このようにして取得したJPGファイルは、そのことを心配せずにWebページで使用できます。

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…
0
Alice M.