У меня есть изображение по этой ссылке: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg
Как видите, это нормальное изображение с правильной ориентацией. Однако, когда я устанавливаю эту ссылку на атрибут src моего тега изображения, изображение становится вверх ногами. http://jsfiddle.net/7j5xJ/
<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Я забыл добавить свой собственный ответ здесь. Я использовал Ruby on Rails, поэтому он не может быть применим к вашим проектам в PHP или других средах. В моем случае я использовал Carrierwave gem для загрузки изображений. Моим решением было добавить следующий код в класс загрузчика, чтобы исправить проблему EXIF перед сохранением файла.
process :fix_exif_rotation
def fix_exif_rotation
manipulate! do |img|
img.auto_orient!
img = yield(img) if block_given?
img
end
end
Я нашел часть решения. Теперь у изображений есть метаданные, указывающие ориентацию фотографии. Существует новая спецификация CSS для image-orientation.
Просто добавьте это в свой CSS:
img {
image-orientation: from-image;
}
Согласно спецификации от 25 января 2016 года Firefox и iOS Safari (за префиксом) являются единственными браузерами, которые поддерживают это. Я вижу проблемы с Safari и Chrome. Однако мобильный Safari, по-видимому, поддерживает ориентацию без тега CSS.
Я полагаю, нам придется подождать и посмотреть, начнут ли браузеры поддерживать image-orientation.
Ваше изображение действительно перевернуто. Но у него есть мета-атрибут "Ориентация", который говорит зрителю, что он должен поворачиваться на 180 градусов. Некоторые устройства/зрители не подчиняются этому правилу.
Откройте его в Chrome: вернитесь вверх Откройте его в FF: вернитесь вверх Откройте его в IE: вверх дном.
Откройте его в Paint: перевернутый Откройте его в Photoshop: Вернитесь вверх. и др.
Это данные EXIF, которые поддерживает ваш телефон Samsung.
Вы можете использовать Exif-JS, чтобы проверить свойство "Ориентация" изображения. Затем примените преобразование CSS по мере необходимости.
EXIF.getData(imageElement, function() {
var orientation = EXIF.getTag(this, "Orientation");
if(orientation == 6)
$(imageElement).css('transform', 'rotate(90deg)')
});
Этот ответ основан на bsap-ответе с использованием Exif-JS, но не основан на jQuery и довольно совместим даже с более старыми браузерами. Ниже приведены примеры файлов html и js:
rotate.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style>
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
</style>
</head>
<body>
<img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
<script type="text/javascript" src="exif.js"></script>
<script type="text/javascript" src="rotate.js"></script>
</body>
</html>
rotate.js:
window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
EXIF.getData(newimg, function() {
var orientation = EXIF.getTag(this, "Orientation");
if(orientation == 6) {
newimg.className = "camview rotate90";
} else if(orientation == 8) {
newimg.className = "camview rotate270";
} else if(orientation == 3) {
newimg.className = "camview rotate180";
}
});
};
сохранить, поскольку png решила проблему для меня.
Пока CSS: image-orientation:from-image; более универсально поддерживается, мы делаем серверное решение с python. Вот суть этого. Вы проверяете данные exif для ориентации, затем поворачиваете изображение соответствующим образом и сохраняете.
Мы предпочитаем это решение по сравнению с клиентскими решениями, так как оно не требует загрузки сторонних библиотек на стороне клиента, и эта операция должна произойти только один раз при загрузке файла.
if fileType == "image":
exifToolCommand = "exiftool -j '%s'" % filePath
exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
if 'Orientation' in exif[0]:
findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
if findDegrees:
rotateDegrees = int(findDegrees)
if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
rotateDegrees = rotateDegrees * -1
# rotate image
img = Image.open(filePath)
img2 = img.rotate(rotateDegrees)
img2.save(filePath)
Эта проблема сводила меня с ума тоже. Я использовал PHP на своей стороне сервера, поэтому я не мог использовать решения @The Lazy Log (ruby) и @deweydb (python). Однако это указало мне правильное направление. Я исправил это с помощью Imagick getImageOrientation().
<?php
// Note: $image is an Imagick object, not a filename! See example use below.
function autoRotateImage($image) {
$orientation = $image->getImageOrientation();
switch($orientation) {
case imagick::ORIENTATION_BOTTOMRIGHT:
$image->rotateimage("#000", 180); // rotate 180 degrees
break;
case imagick::ORIENTATION_RIGHTTOP:
$image->rotateimage("#000", 90); // rotate 90 degrees CW
break;
case imagick::ORIENTATION_LEFTBOTTOM:
$image->rotateimage("#000", -90); // rotate 90 degrees CCW
break;
}
// Now that it auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image!
$image->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
}
?>
Вот ссылка, если вы хотите узнать больше. http://php.net/manual/en/imagick.getimageorientation.php
Простым способом устранения проблемы, без кодирования, является использование функции Photoshop Save for Web export. В диалоговом окне можно выбрать удаление всех или большинства изображений EXIF. Я обычно оставляю информацию об авторских правах и контактах. Кроме того, поскольку изображения, поступающие непосредственно с цифровой камеры, сильно завышены для веб-дисплея, это хорошая идея сократить их с помощью Save for the Web в любом случае. Для тех, кто не является подкованным Photoshop, я не сомневаюсь, что существуют онлайн-ресурсы для изменения размера изображения и удаления его из ненужных данных EXIF.
Я думаю, что есть некоторые проблемы в браузере с автоматическим исправлением ориентации изображения, например, если я посещаю изображение напрямую, оно показывает правильную ориентацию, но показывает неправильную ориентацию на некоторых выходах HTML-страницы.
Если у вас есть доступ к Linux, откройте терминал, перейдите в каталог с вашими изображениями и запустите
mogrify -auto-orient *
Это должно навсегда решить проблемы с ориентацией
Используйте внешний стиль. в html-лист введите имя класса в тег. в таблице стилей используйте оператор точки, предшествующий имени класса, а затем напишите следующий код
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}