I´m trying to resize a picture in javascript on the client browser before send it, so that I can save bandwidth. The code is running fine with the only exception of the part that read the EXIF from the file.
I believe the problem is with the function var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
Can someone help me to make it working?
Here is my code:
<script type="text/javascript" src="js/exif.js"></script>
<script type="text/javascript">
function doUpload() {
var file = document.getElementById('fileToUpload').files[0];
var dataUrl = "";
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e)
{
img.src = e.target.result;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
reader.onloadend = function (e) {
var exif = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
switch(exif.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
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -canvas.height);
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
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-canvas.width, 0);
break;}
}
// Set Width and Height
var MAX_WIDTH = 1024;
var MAX_HEIGHT = 1024;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataUrl = canvas.toDataURL("image/jpeg");
document.getElementById('image_preview').src = dataUrl;
// Post the data
var fd = new FormData();
fd.append("image", dataUrl);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
//xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "uploadPicture.php");
xhr.send(fd);
}
// Load files into file reader
reader.readAsDataURL(file);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progress').innerHTML = percentComplete.toString() + '%';
} else {
document.getElementById('progress').innerHTML = 'Upload error!';
}
}
function uploadComplete(evt) {
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("Error on file upload!");
}
function uploadCanceled(evt) {
alert("Upload aborted or network error!");
}
</script>
