Home/ Questions/Q 6690951
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:41:44+00:00

I am using canvas to manipulate images, crop, resize and optimise before uploading them.

  • 0

I am using canvas to manipulate images, crop, resize and optimise before uploading them.

I am using the toDataUrl() method to get the image data once it has been manipulated. I have the base 64 encoded PNG url from this.

I know the file size of the image to begin with but am unsure how to get the file size of the image after it has been cropped etc… Without uploading the image.

Getting the length of the data url seems to have no relation to the image size as far as I can see… and I am unsure how to get the information that I am looking for: The file size of the image data after manipulation, from the base 64 encoded PNG url.

Uploading the image at this point is kind of defeating the purpose as I need all of this to be done client side. I just need to ensure that the image is < max before uploading.

There seems to be so little explanation of this anywhere, that any information at all would be of great help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .toDataURL returns a base 64 encoded PNG image of the canvas, something like:

    data:image/png;base64,iVBORw0KG...

    The base 64 encoded part starts after the comma, i.e. at position 22. So all you need to do is decoding the string, starting from index 22: http://jsfiddle.net/eGjak/187/.

    var decoded = atob(cv.toDataURL().substr(22)); // atob decodes base 64

alert(decoded.length); // length of png file
    • 0