how to detect the MIME type of data URL

Question

I'm developing an angular 4 application. I have a base64 encoded image. I'm saving it in the file system with node.js.

 if (body.profilepic != "") {
            let base64Data = body.profilepic.split(';base64,').pop();

            fs.writeFile("out.png", base64Data, 'base64', function(err) {
                if (!err) {
                    console.log("saved file")
                }
            });
        }

The thing is that I can't detect the file type of the image I'm saving. right now it only saves pngs.

How do I detect the file type of the image string I'm receiving?

The base64 encoded string I'm getting is something like this:

data:image/png;base64,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

Overeager

What is body.profilepic? – Hokkaido

The base64 string shows the format within the string. data:image/gif;base64 Exaple data:image/ Format ;base64 When the comment before had been posted I thought I has read the question wrong and removed my comment but then I remembered seeing body.profilepic.split(';base64,').pop(); so you can so the same thing to get the format. from the string. – Natter

@Hokkaido that is the variable that contain the base64 string – Overeager

@Natter i have updated my post please see – Overeager

Answer 1

You don't need regex or anything fancy.

The dataUrl has a very predictible format and we know that mime is going to be in the very beginning. So it's fine to stop in the first occurences of ':' and ';'.

dataUrl = "data:image/png;base64,abcdefghijklm.."
dataUrl.substring(dataUrl.indexOf(":")+1, dataUrl.indexOf(";"))  // => image/png

Attalanta

Answer 2

Extracting the content (MIME) type from a full base64 content.

const base64Content = "data:image/png;base64,iVBORw0KGgoAENCODEDDATA=="
    
// base64 encoded data doesn't contain commas    
let base64ContentArray = base64Content.split(",")     
   
// base64 content cannot contain whitespaces but nevertheless skip if there are!
let mimeType = base64ContentArray[0].match(/[^:\s*]\w+\/[\w-+\d.]+(?=[;| ])/)[0]

// base64 encoded data - pure
let base64Data = base64ContentArray[1]

console.log("base64Content: ", base64Content)
console.log("mimeType: ", mimeType)
console.log("base64Data: ", base64Data)

Ikkela

I've read that you should avoid regex in production apps at any cost. – Gesture

Answer 3

You can use RegExp /[^:]\w+\/[\w-+\d.]+(?=;|,)/ to match one or more word characters preceded by :, followed by /, followed by one or more word characters in a character set including - character to handle application/octet-stream, + to handle image/svg+xml, \d to handle application/x-7z-compressed, . to handle application/vnd.apple.mpegurl followed by ; or , character to handle base64 not being included in the data URL

const body = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};

let mimeType = body.profilepic.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];

console.log(mimeType);

Hokkaido

Answer 4

const obj = /data:(.*);base64,(.*)/.exec('data:image/png;base64,iVBORw0KGgoAAAANSkJggg==');

console.log('MIME Type: ' + obj[1]);
console.log('Base64 data: ' + obj[2]);

Or from IMG tag:

const obj = /<img.*src="data:(.*);base64,(.*?)"/.exec('<img src="data:image/png;base64,iVBORw0KGgoAAAANSkJggg==" />');

console.log('MIME Type: ' + obj[1]);
console.log('Base64 data: ' + obj[2]);

Fransen

Answer 5

if you want to get Mime type like (image/png), (image/jpg) use this one

const body = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType = body.profilepic.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];

online Demo here

===========================================

if you want to get only type of it like (png, jpg) etc

const body2 = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType2 = body2.profilepic.match(/[^:/]\w+(?=;|,)/)[0];

online Demo here

Reni