upload image canvas jquery

For some dependencies I have to upload to the server images 670 X 525 px (whatever is the original size of the image that users upload). So the idea was draw image into canvas

canvasContext.drawImage(0, 0, myimageSelector.naturalWidth, myimageSelector.naturalHeight, 0, 0, 670, 525);

convert the canvas to blob then upload the blob to the server it and it worked.

var dataUrl= mycanvasSelector.toDataUrl('image/png');
var blob = convertDataUrlToBlob(dataUrl);
// upload blob as image 
...

But when I looked at the uploaded images on the server I noticed that images size increased at least by 5 times compared to the original image size. is there any idea to reduce size before uploading. Thanks