修复blob图像或内容而不使用Canvas - EXIF rotaion [英] Fix blob image orintaion without using Canvas - EXif rotaion
问题描述
我们有一些使用jquery进行图片上传和预览的代码。请看这个小提琴和代码。
https://jsfiddle.net/28v6vd23/1/
function readURL(){var fileList = this.files; var anyWindow = window.URL || window.webkitURL; var ValidImageTypes = [image / gif,image / jpeg,image / png]; for(var i = 0; i< fileList.length; i ++){var file_allow = fileList [i]; var fileType = file_allow [type]; if($ .inArray(fileType,ValidImageTypes)> 0){var objectUrl = anyWindow.createObjectURL(fileList [i]); var ran_x = Math.floor((Math.random()* 1000000000000)+ 1); $('。new')。append('< div class =my-img-divstyle =width:auto; display:inline-block;>< img src ='+ objectUrl +' class =my-imgid =/>< / div>'); window.URL.revokeObjectURL(的fileList [I]); }}} var inputfile = document.getElementById(inputFile); inputfile.addEventListener(change,readURL,false);
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< form id =form1runat = 服务器 > < input type ='file'id =inputFile/> < / form>< div class =new>< / div>
这里是图片正确预览的一些图片,
但是对于一些图片旋转90度。请检查这一点。
请检查此图片 https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view
我们如何解决这个问题?
更新
从 @qvotaxon 回答我可以理解 https://github.com/blueimp/JavaScript-Load-Image 这将有助于解决问题。但是当我看着这个时候,我正在为整合而苦苦挣扎。如果任何人都可以帮助与我当前的代码集成,那将非常有帮助。
谢谢
在EXIF数据中。看看这篇文章 JS客户端Exif方向:旋转和镜像JPEG图像
寻求解决方案。
we have some code for image upload and preview using jquery .Please see this fiddle and code .
https://jsfiddle.net/28v6vd23/1/
function readURL() {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
for(var i = 0; i < fileList.length; i++){
var file_allow = fileList[i];
var fileType = file_allow["type"];
if ($.inArray(fileType, ValidImageTypes) > 0) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
var ran_x = Math.floor((Math.random() * 1000000000000) + 1);
$('.new').append('<div class="my-img-div" style="width:auto; display:inline-block;" ><img src="' + objectUrl + '" class="my-img" id="" /></div>');
window.URL.revokeObjectURL(fileList[i]);
}
}
}
var inputfile= document.getElementById("inputFile");
inputfile.addEventListener("change",readURL,false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="inputFile" />
</form>
<div class="new">
</div>
here for some images the image is previewing correctly ,
but for some images it is rotating 90 degree. Please check this .
Please check with this image https://drive.google.com/file/d/1UVW6dXMESAkeRFVxwBfsWWa4e9xD-DIL/view
How we can solve this ?
UPDATE
From @qvotaxon answer i can understand that https://github.com/blueimp/JavaScript-Load-Image this will help to solve the problem . But when i look into this i am struggling with the integration . If anyone can help the integration with my current code it will be really helpful .
Thank you
The orientation of the image is probably stored in the EXIF-data. Have a look at this post JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images for a solution.
这篇关于修复blob图像或内容而不使用Canvas - EXIF rotaion的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!