我在这个链接的图像: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"/>你知道发生了什么吗？
Che*_*het 80
我找到了部分解决方案.图像现在具有指定照片方向的元数据.有一个新的CSS规范image-orientation.
只需将其添加到您的CSS:
img {
image-orientation: from-image;
}
根据2016年1月25日的规范,Firefox和iOS Safari(在前缀后面)是唯一支持此功能的浏览器.我发现Safari和Chrome仍有问题.但是,移动Safari似乎本身支持没有CSS标记的方向.
我想我们必须等待,看看浏览器是否会开始支持image-orientation.
i-C*_*ICA 23
你的形象实际上是颠倒的.但它有一个meta属性"Orientation",告诉观众应该旋转180度.某些设备/观看者不遵守此规则.
在Chrome中打开它:正确向上在FF中打开它:正确向上在IE中打开它:颠倒
在Paint中打开它:颠倒在Photoshop中打开它:正确向上.等等
The*_*Log 12
我忘了在这里添加自己的答案.我使用的是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
小智 9
该答案基于使用Exif-JS的 bsap答案，但不依赖jQuery，即使与较旧的浏览器也相当兼容。以下是示例html和js文件：
rotation.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>
rotation.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";
}
});
};
小智 7
您可以使用Exif-JS来检查图像的"Orientation"属性.然后根据需要应用css转换.
EXIF.getData(imageElement, function() {
var orientation = EXIF.getTag(this, "Orientation");
if(orientation == 6)
$(imageElement).css('transform', 'rotate(90deg)')
});
这个问题也让我发疯。我在服务器端使用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's 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/zh/imagick.getimageorientation.php
在image-orientation:from-image;更广泛地支持CSS：之前，我们正在使用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)
如果可以访问Linux，则打开一个终端，进入包含映像的目录cd，然后运行
mogrify -auto-orient *
这将永久解决所有图像上的方向问题。