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