Digital camera photos are often saved as JPEG with an EXIF "orientation" tag. To display correctly, images need to be rotated/mirrored depending on which orientation is set, but browsers ignore this information rendering the image.
I want after upload image, before send image for php it fix orientation (rotate/mirror the image on the client side so that it displays correctly) image auto, what's the solution? how is it in my code?
HTML:
<input type="file" name="files[]" id="fileElem" multiple="multiple" accept="image/*" onchange="handle_Files(this.files)">
JS:
function handle_Files(files) {
var d = document.getElementById("fileList");
var formData = new FormData($('.EditUserInfo')[0]);
$.ajax({
url: 'insert_image',
type: 'POST',
dataType: 'json',
maxNumberOfFiles: 1,
autoUpload: false,
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
},
success: function(result) {
console.log($.ajaxSettings.xhr().upload);
var div = document.createElement("div");
div.style.backgroundImage = 'url(' + window.URL.createObjectURL(files[0]) + ')';
div.onload = function() {
window.URL.revokeObjectURL(this.src);
}
}
data: formData,
cache: false,
contentType: false,
processData: false
});
}