Resize Image Before Submitting the Form in HTML5

To resize the image before submitting the form, you need to use the drawImage() method.

Scale the original image and draws the scaled version on the canvas at [0,0]

context.drawImage( img, 0,0,img.width,img.height, 0,0,myWidth,UseHeight );

Above, we saw the following:

Here,

var myWidth = Math.floor( img.width * Scale );
var myHeight = Math.floor( img.height * Scale );

And,

var x = Math.floor( ( world.width - myWidth) / 2 );
var y = Math.floor( ( world.height - myHeight) / 2 );