javascript jQuery 图像预览 exif 旋转问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28251338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery image preview exif rotation issue
提问by Alex
I am using this jQuery function do display the image before uploading. The images are uploaded from mobile devices and have problems with the exif orientation. This function just change the src of the preview image with the base64 code of the actual file image.
我正在使用这个 jQuery 函数在上传之前显示图像。这些图像是从移动设备上传的，并且在 exif 方向上存在问题。此函数只是将预览图像的 src 更改为实际文件图像的 base64 代码。
On server side (php) i am using a function to correct the exif rotation on upload.
在服务器端 (php)，我正在使用一个函数来更正上传时的 exif 旋转。
Can i make something similar in jQuery to my PHP code? So that i can display the image before uploading with the right rotation?
我可以在 jQuery 中创建与我的 PHP 代码类似的东西吗？这样我就可以在正确旋转上传之前显示图像？
Javascript
Javascript
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
PHP
PHP
function image_fix_orientation($filename) {
$exif = exif_read_data($filename);
if (!empty($exif['Orientation'])) {
$image = imagecreatefromjpeg($filename);
switch ($exif['Orientation']) {
case 3:
$image = imagerotate($image, 180, 0);
break;
case 6:
$image = imagerotate($image, -90, 0);
break;
case 8:
$image = imagerotate($image, 90, 0);
break;
}
imagejpeg($image, $filename, 100);
}
}
回答by Vadim Boltach
Yes, sure. To preview image you are using FileReader API that right. But also you have to check EXIF flags and fix orientation. You can use https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js
是的，当然。要预览图像，您正在使用 FileReader API。但您还必须检查 EXIF 标志并修复方向。您可以使用https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js
And check flags like this:
并检查这样的标志：
function fixExifOrientation($img) {
$img.on('load', function() {
EXIF.getData($img[0], function() {
console.log('Exif=', EXIF.getTag(this, "Orientation"));
switch(parseInt(EXIF.getTag(this, "Orientation"))) {
case 2:
$img.addClass('flip'); break;
case 3:
$img.addClass('rotate-180'); break;
case 4:
$img.addClass('flip-and-rotate-180'); break;
case 5:
$img.addClass('flip-and-rotate-270'); break;
case 6:
$img.addClass('rotate-90'); break;
case 7:
$img.addClass('flip-and-rotate-90'); break;
case 8:
$img.addClass('rotate-270'); break;
}
});
});
}
I prefer to rotate images with CSS transform. Here is implementation:
我更喜欢用 CSS 变换来旋转图像。这是实现：
.rotate-90 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate-180 {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate-270 {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.flip {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.flip-and-rotate-90 {
-moz-transform: rotate(90deg) scaleX(-1);
-webkit-transform: rotate(90deg) scaleX(-1);
-o-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
}
.flip-and-rotate-180 {
-moz-transform: rotate(180deg) scaleX(-1);
-webkit-transform: rotate(180deg) scaleX(-1);
-o-transform: rotate(180deg) scaleX(-1);
transform: rotate(180deg) scaleX(-1);
}
.flip-and-rotate-270 {
-moz-transform: rotate(270deg) scaleX(-1);
-webkit-transform: rotate(270deg) scaleX(-1);
-o-transform: rotate(270deg) scaleX(-1);
transform: rotate(270deg) scaleX(-1);
}
回答by user3026707
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" width="300px" height="300px">
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script type="text/javascript">
function readFile() {
if (this.files && this.files[0])
{
var FR= new FileReader();
FR.onload = function(e)
{
document.getElementById("img").src=e.target.result;
document.getElementById("b64").innerHTML=e.target.result;
};
FR.readAsDataURL( this.files[0] );
}
else
{
alert("in else");
}
}
document.getElementById("inp").addEventListener("change", readFile, false);
</script>
</html>
