Salve a tutti io ho un problema nel creare una pagine html , in poche parole dovrei creare una pagine html che ridimensioni un immagine prima di essere caricata vi mostro il codice della mia pagina

<form action="Pagina.php" enctype="multipart/form-data" method="POST">

<img src="" id="image">
<input id="input" type="file" name="userfile" onchange="handleFiles()">


<br>


<input name="invio" value="Continua" type="submit" class="button"><br>


</form>


<script>


function handleFiles()
{
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];


// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = 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 = 400;
var MAX_HEIGHT = 300;
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 dataurl = canvas.toDataURL("image/png");
document.getElementById('image').src = dataurl;
}



reader.readAsDataURL(file);

// Ho provato anche ad usare ajax ma niente
$.ajax({
url: 'Pagina.php',
type: 'POST',
data: dataurl,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
});
}