I´m trying to upload multiple images and before uploading resize them and then check the orientation and rotate the canvas based on the exif orientation.
But it is drawing the image to soon, before the orientation check. I have tested to place the ctx.drawImage(this, 0, 0, tempW, tempH); everywhere but all I get is errors.
So the below code is displaying an image lying down so it is not running the orientation check until after the image is drawn.
The console shows this order of events. Where it is drawing the image to soon so it is never rotating the canvas.
Page initialized
canvas created
drawimage
show thumbnails
send to blob
image loaded
orientation 6
canvas to blob
And the order should be
Page initialized
canvas created
image loaded
orientation 6
drawimage
show thumbnails
send to blob
canvas to blob
So where should I place the ctx.drawImage(this, 0, 0, tempW, tempH); code? Or what am I missing?
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('uploadfiles').onchange = function(){
var files = document.getElementById('uploadfiles').files;
for(var i = 0; i < files.length; i++) {
resizeAndUpload(files[i],files[i].name);
console.log(files[i].name)
fileNames=(files[i].name)
}
};
} else {
alert('The File APIs are not fully supported in this browser.');
}
var dataURL;
function resizeAndUpload(file,fileNames) {
var reader = new FileReader();
reader.onloadend = function() {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {
var MAX_WIDTH = 600;
var MAX_HEIGHT = 1000;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
}
else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
console.log('canvas created')
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
window.loadImage(tempImg.src, function (img) {
if (img.type === "error") {
console.log("couldn't load image:", img);
} else {
console.log("image loaded")
window.EXIF.getData(file, function () {
//console.log("load image done!");
var exifData = window.EXIF.getTag(this, "Orientation");
if (exifData) {
//app.dialog.alert(exifData);
} else {
app.dialog.alert("No EXIF data found in image '" + file.name + "'.");
}
var orientation = window.EXIF.getTag(this, "Orientation");
var make = EXIF.getTag(this, "Make"),
model = EXIF.getTag(this, "Model");
var MetaData = EXIF.getAllTags(this);
console.log("orientation "+orientation)//denna visar rätt origentation på mobilen
})
}
})
if(orientation) {
switch(orientation){
case 2:
// horizontal flip
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
break;
case 3:
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
break;
case 4:
// vertical flip
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
break;
case 5:
// vertical flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
// 90° rotate right
console.log("case 6")
canvas.width = tempH;
canvas.height = tempW;
canvas.getContext("2d").rotate(0.5 * Math.PI);
canvas.getContext("2d").translate(0, -canvas.width);
break;
case 7:
// horizontal flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(canvas.width, -canvas.height);
ctx.scale(-1, 1);
break;
case 8:
// 90° rotate left
canvas.width = tempH;
canvas.height = tempW;
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-canvas.height, 0);
break;
}
}
console.log("drawimage")
ctx.drawImage(this, 0, 0, tempW, tempH);//where should this be????
dataURL = canvas.toDataURL('image/jpeg');
console.log("show thumbnails")
var div = document.createElement('div');
div.innerHTML = '<img style="height: 100px;" src="' + tempImg.src + '" />';
document.getElementById('filesInfo').appendChild(div);
//document.getElementById('filesInfo').appendChild(canvas);
sendToBlob(dataURL,canvas,fileNames);
console.log("send to blob")
}
}
reader.readAsDataURL(file);
}
So what am I doing wrong or what am I missing? I have tested all day so any input really appreciated, thanks.