jQuery图像预览exif轮换问题
我正在使用这个jQuery函数在上传之前显示图像。 图像是从移动设备上传的，并且在exif方向上存在问题。 此函数只是使用实际文件图像的base64代码更改预览图像的src。
在服务器端（PHP）我正在使用一个函数来纠正上传时的exif轮换。
我可以在jQuery中为我的PHP代码创建类似的东西吗？ 这样我可以在正确旋转上传之前显示图像吗？
使用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
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); } }
是的，当然。 要预览图像，您正在使用正确的FileReader API。 但您还必须检查EXIF标志并修复方向。 您可以使用https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js
并检查这样的标志：
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; } }); }); }
我更喜欢用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); }
![]()