dimanche 29 mars 2015

Resize Image File with Javascript and HTML5 in Browser

In my Webapp i let the User choose a picture from their harddrive through an input form. Then i want to resize it. the html code looks like this:



<form style="margin-top: 15px;">
<input type="file" name="pic" id="product_pictureUploadModal" accept="image/jpeg, image/png, image/jpg" />
</form>


I get the file attached to that input as follows:



var fileUploadControl = $("#product_pictureUploadModal")[0];
var file = fileUploadControl.files[0];


Now i want to resize the image the user chose not changing its aspect ratio.


I´m doing that using a canvas right now: Using following code:



function resizeImage(file){

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
var canvas = document.createElement('canvas');

var MAX_WIDTH = 250;
var MAX_HEIGHT = 1500;
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);

var fileRezized = canvas.toDataURL('image/jpeg');
return fileRezized;
}


The problem i have now is, that my backend, named Parse, does not accept String as an file upload parameter. Before resizing the image i can upload it just fine using a Parse.File. But afterwards i get the following errormessage: uncaught exception: Creating a Parse.File from a String is not yet supported.


I hope you guys can help me. I believe what I´m trying to do shouldnt be that hard. Am i even on the right track? Where should read into, what should i start to learn to be able to do this?


greetings from germany, marvin.


Aucun commentaire:

Enregistrer un commentaire