Get size of toDataUrl() image before upload?

Question

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

Answer 1

.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