How can I preview the image before loading with the correct orientation using JavaScript?
I have a download button and I want users to be able to preview the image before clicking Save. I have
<input type="file" accept="image/*" id="avatarInput" onchange="PreviewImage();"/>
like my HTML and my JS:
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("avatarInput").files[0]);
oFReader.onload = function (oFREvent) {
$('.image').attr('src', oFREvent.target.result);
};
};
But now when I try to load a portrait image on a mobile device the preview image is rotated 90 degrees. How can I handle this? I've seen this and this one , but I don't know what codes can be included in my case. Thank.
Update:
Now I have
function PreviewImage() {
var oFReader = new FileReader();
oFReader.onloadend = function () {
var showPicture = $('.mainavatar img');
var exif;
exif=EXIF.readFromBinaryFile(new BinaryFile(this.result));
console.log(exif);
$('.mainavatar img').attr('src', this.result);
};
oFReader.readAsBinaryString(document.getElementById("avatarInput").files[0]);
};
with exif.js and binary.js included, but I get the error Uncaught TypeError: First argument to DataView constructor must be an ArrayBuffer
source to share
I used canvas for rotation. I don't know how to use exif.js, so I used a different library.
It is also possible to use css.
function PreviewImage() {
var file = document.getElementById("avatarInput").files[0];
if (!file.type.match('image/jpeg.*')) {
// processing without jpeg
}
var reader = new FileReader();
reader.onload = function(e) {
var exif = piexif.load(e.target.result);
var image = new Image();
image.onload = function () {
var orientation = exif["0th"][piexif.ImageIFD.Orientation];
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
ctx.save();
if (orientation == 2) {
x = -canvas.width;
ctx.scale(-1, 1);
} else if (orientation == 3) {
x = -canvas.width;
y = -canvas.height;
ctx.scale(-1, -1);
} else if (orientation == 4) {
y = -canvas.height;
ctx.scale(1, -1);
} else if (orientation == 5) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
y = -canvas.width;
ctx.scale(1, -1);
} else if (orientation == 6) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
} else if (orientation == 7) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
ctx.scale(-1, 1);
} else if (orientation == 8) {
canvas.width = image.height;
canvas.height = image.width;
ctx.translate(canvas.width, canvas.height / canvas.width);
ctx.rotate(Math.PI / 2);
x = -canvas.height;
y = -canvas.width;
ctx.scale(-1, -1);
}
ctx.drawImage(image, x, y);
ctx.restore();
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
$(".mainavatar img").attr("src", dataURL);
};
image.src = e.target.result;
};
reader.readAsDataURL(file);
}
source to share
It should still be an ArrayBuffer error to get the first argument for the DataView constructor.
function chooseFile() {
var file = $('#file').prop('files')[0];
var fileReader = new FileReader();
fileReader.onload = function (event) {
var arrayBuffer = base64ToArrayBuffer(this.result);
var exif = EXIF.readFromBinaryFile(new BinaryFile(arrayBuffer));
console.log(exif.Orientation);
};
fileReader.readAsDataURL(file);
}
function base64ToArrayBuffer(base64) {
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
source to share
You need to convert base64 string to ArrayBuffer for ExifJs:
function base64ToArrayBuffer (base64) {
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array( len );
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
You don't need BinaryFile
:
exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));
source to share