我正在尝试拍照并使用Samsung S7将其上传到我的应用程序中。但是上传时图像正在旋转。即使我也从图库中选择图像,它也会在上传时旋转。有什么我们可以从jquery代码修复。请建议。提前致谢
HTML:
<div class="photo-div" id="photo">
<img id="uploadimage" src="" hidden="">
</div>
<label id="files-label" for="files" class=" myprofile-btn-bold">Replace Image</label>
<input id="files" style="display:none;" type="file" accept="image/*" onchange="readURL(this);">
Jquery的:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#files-label').html('Replace Image');
$('.photo-image').removeClass('photo-image');
$('#uploadimage').attr('src', e.target.result);
$("#headshot-message").hide();
$("#headshot-cancel").hide();
$('#noimage-label').addClass('hidden');
}
reader.readAsDataURL(input.files[0]);
}
}
答案 0 :(得分:9)
当您转动手机拍照时,手持电话时指示灯会朝向相机传感器。相机应用程序不会保存在屏幕上看到的图像,但它只是使用方向传感器中的当前EXIF orientation data标记它们。
此信息由您的图库应用解释,以相应地显示图像,但浏览器会忽略它并显示传感器视角拍摄的图片。
转身图片
您可以根据imagemagick auto-orient的服务器上的EXIF数据来转换和保存图片:
convert uploadedImage.jpg -auto-orient turnedImage.jpg
或者使用exif-orient Script或jQuery在客户端上使用JavaScript转换它们,如this post中所述。
答案 1 :(得分:0)
这是ImageMagick解决方案的本机PHP替代品:
拍照时,手机会将所有旋转元数据保存在EXIF标头中。当您将图像上传到服务器时,该元数据仍位于其中,但是将图像应用于图像以旋转图像(如果需要)是您的工作。在PHP中,您可以使用名为exif_read_data的函数:
function correctImageOrientation($filename)
{
$exif = exif_read_data($filename);
if ($exif && isset($exif['Orientation'])) {
$orientation = $exif['Orientation'];
if ($orientation != 1) {
$img = imagecreatefromjpeg($filename);
$deg = 0;
switch ($orientation) {
case 3:
$deg = 180;
break;
case 6:
$deg = 270;
break;
case 8:
$deg = 90;
break;
}
if ($deg) {
$img = imagerotate($img, $deg, 0);
}
imagejpeg($img, $filename, 95);
}
}
}
要按原样使用该功能,只需在保存文件后调用它。有关更多信息和其他PHP解决方案,请参见the original source。