I followed this question to resize image before upload and it works. But I need to post this image like when I submit the form.. I have tried lots of things to do this but no way.. I don't want to send it with ajax. It should be appended to post request as does. Documents/answers that I found say 'post with ajax'..
Do you have an idea? Thank you for your helps!
Edit: here is the code. (almost identical with the link above)
function handleFiles()
{
var filesToUpload = $(this)[0].files;
var file = this_input.get(0).files[0];
var name = file.name;
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
var ctx;
var dataurl;
reader.onload = function(e)
{
img.src = e.target.result;
alert(e.target.result);
var canvas = document.createElement("canvas");
//var canvas = $("<canvas>", {"id":"testing"})[0];
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 1920;
var MAX_HEIGHT = 1080;
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;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/jpeg");
//$('#img_hidden').attr('value', dataurl);
document.getElementById('image').src = dataurl;
}
// Load files into file reader
reader.readAsDataURL(file);
}