title: upload image canvas jquery
body: <p>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 </p>
  
  <p><code>canvasContext.drawImage(0, 0, myimageSelector.naturalWidth, myimageSelector.naturalHeight, 0, 0, 670, 525);</code></p>
  
  <p>convert the canvas to blob then upload the blob to the server it and it worked.</p>
  
  <pre><code>var dataUrl= mycanvasSelector.toDataUrl('image/png');
  var blob = convertDataUrlToBlob(dataUrl);
  // upload blob as image 
  ...
  </code></pre>
  
  <p>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   </p>