Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to detect the MIME type of data URL

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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
like image 521
pavithra rox Avatar asked Jan 26 '18 05:01

pavithra rox


People also ask

How do I find MIME type?

string mimeType = MimeMapping. GetMimeMapping(fileName); If you need to add custom mappings you probably can use reflection to add mappings to the BCL MimeMapping class, it uses a custom dictionary that exposes this method, so you should invoke the following to add mappings (never tested tho, but should prob. work).

What is MIME type in HTML?

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.

What is base64 URL?

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only of ASCII characters, base64 strings are generally url-safe, and that's why they can be used to encode data in Data URLs.

What is data URL in HTML?

A Data URL is a URI scheme that provides a way to inline data in a document, and it's commonly used to embed images in HTML and CSS.


2 Answers

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
like image 85
Pithikos Avatar answered Oct 17 '22 11:10

Pithikos


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)
like image 22
efkan Avatar answered Oct 17 '22 12:10

efkan