Ibrahim Tanyalcin

{intrst:"Scnc&Art",msc:"admin@MutaFrame",strive:"Experiment&Learn",loves:"ES5",hates:"bandwagon",lang:"Javascript",twttr:"@ibrhmTanyalcin"}

Jan 15, 2018

Atul gave a great answer.

As far as I can remember the format looks like:

data:<MIME>[;<charset>];base64,.......

Here we need to check first the valid MIME types for image:

image/gif, image/png, image/jpeg, image/bmp, image/webp
Usually the charset is charset=utf-8 but it might not be there as well.
I checked from wikipedia the index table for base64, looks like you have all alpha numeric chars plus + and /
the ending of the sequence can have 0, 1 or 2 equals (=) depending on how many bytes the last group contains.

This is not rigorous checking but your final regex should be along these lines:

/^data:image\/(?:gif|png|jpeg|bmp|webp)(?:;charset=utf-8)?;base64,(?:[A-Za-z0-9]|[+/])+={0,2}/g

Simon Hamp

Code isn't everything. Live

Jan 17, 2018

This is fine if the string you're dealing with includes the MIME type at the start, but don't bank on it. It's more likely that the Base64-encoded file string won't include that as it's not part of the encoding process and won't be added by default.

It might be added after the fact though, for example as a part of the HTML for rendering on a page. The MIME type prefix is required by browsers to aid in rendering Base64-encoded image files.

Unless, the client/user is using window.btoa or decoding from ArrayBuffer manually, the MIME type in principle should be there or at least added. If the data is manually formed and uploaded, its user's responsibility to include the mime type. For instance if you are going to read data from a Blob , you are given the option to specify type which then you can use the FileReader to read data from it. You can of course give it a falsey "text/plain" but then what? All comes to my mind is then to check if the array buffer of base64 has length with multiples of 4 (r+g+b+a) and each entry is smaller than 255.

Search Hashnode