ブラウザでJPGファイルの自動回転が無効になっていることを知っています。
一部のWebサイトのレイアウトが破損するため、有効にできません。
CSSプロパティはありますか？またはそれを達成するためのjavascriptコード？または、他の何か？または多分この問題の解決策はまだ存在していませんか？
質問する
45190 次
7 に答える
35
CSS 画像方向: from-image
仕様からhttps://www.w3.org/TR/css4-images/#the-image-orientation
6.2. ページ上の画像の向き: 'image-orientation' プロパティ
画像の向き: 画像から
from-image: イメージのメタデータ (EXIF など) で方向が指定されている場合、この値は、メタデータが指定する角度に計算され、イメージを正しく方向付けるために必要です。必要に応じて、この角度は丸められ、上記の値のように正規化されます。メタデータに方向が指定されていない場合、この値は「0deg」に計算されます。
一致する Chrome の問題: https://bugs.chromium.org/p/chromium/issues/detail?id=158753
ただし、ブラウザのサポートはまだありません: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility
JS で回転
これを行うための JS スニペットがあります: https://gist.github.com/runeb/c11f864cd7ead969a5f0
私の結論
imagemagick のようなツールを使用してサーバー上で画像を回転させるのはオーバーヘッドが大きすぎると思います。
ブラウザーは画像を回転できますが、Web アプリケーションはこれを明示的に回転する方法をアドバイスする必要があります。
ブラウザーの回転でのこの明示的な操作は、次のように行うことができます: https://stackoverflow.com/a/11832483/633961
于 2016-04-13T08:58:54.540 に答える
4
画像を回転させる小さな 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);
?>
乾杯
于 2018-03-17T18:29:52.707 に答える
2
前のポスターが言ったように、あなたは画像自体を回転させる必要があるでしょう。ただし、その次に、EXIFで回転タグを設定/リセットすることもできます。そうすれば、向きタグを尊重する視聴者が再びそれを回転させることを回避できます。EXIFを編集できるツールはExifToolと呼ばれ、無料です。
于 2012-09-29T19:05:52.217 に答える