Well let's see, you have your canvas 👩🎨, you have encoded the output to base64 jpeg... Stop! Before you make a huge massive string which actually adds more weight as base64 maybe think about formats for a moment. .webp is Google's darling image format which promises to see large reductions to overall size with lossless quality, in practical terms it might make the image a tiny bit more blury but honestly I can't tell, even with my glasses on 👓.
https://developers.google.com/speed/webp
So because I googled it I know and so will you, you can set a canvases dataURI format to webp, effectively counteracting the bloat in theory. But by how much I'm not certain 👨🔬 having niether the will to do so. This is a theoretical post because I'm lazy today.
Okay you have a lovely big optimized string, what if you could stage it in such a way that this base64 image didn't appear in the Dom? What if it looked more like a URL?
Enter: URL.createObjectURL(blob);
https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
Boom, this works.
Okay but what if my browser doesn't support webp?
David Walsh to the rescue!
https://davidwalsh.name/detect-webp
So that's cool isn't it, I had less time to explain all this, this time was a fast train.
Top comments (0)