How can I strip the data:image part from a base64 string of any image type in Javascript

Question

I am currently doing the following to decode base64 images in Javascript:

    var strImage = "";
    strImage = strToReplace.replace("data:image/jpeg;base64,", "");
    strImage = strToReplace.replace("data:image/png;base64,", "");
    strImage = strToReplace.replace("data:image/gif;base64,", "");
    strImage = strToReplace.replace("data:image/bmp;base64,", "");

As you can see above we are accepting the four most standard image types (jpeg, png, gif, bmp);

However, some of these images are very large and scanning through each one 4-5 times with replace seems a dreadful waste and terribly inefficient.

Is there a way I could reliably strip the data:image part of a base64 image string in a single pass?

Perhaps by detecting the first comma in the string?

Thanks in advance.

score 69 · Accepted Answer · answered Jul 28 '16 at 10:05

69

You can use a regular expression:

var strImage = strToReplace.replace(/^data:image\/[a-z]+;base64,/, "");

^ means At the start of the string
data:image means data:image
\/ means /
[a-z]+ means One or more characters between a and z
;base64, means ;base64,

answered Jul 28 '16 at 10:05

Nicolò

1,795
1
16
16

2

I don't know if is better for performance, but logically I'd say "yes" (the replace and regular expression search for matches in the entire string, indexof breaks on the first char equal to it's parameter), maybe I'll do some perfomance test: `var strImage = strToReplace.Substring(strToReplace.IndexOf(',')+1);` – Sycraw Feb 01 '17 at 17:55
`strToReplace.replace(/^data:image\/\w+;base64,/, "")` – Anthony Awuley Jan 03 '18 at 20:16

Jonas Wilms · Answer 2 · 2018-11-12T15:47:52.693

33

var solution = string.split("base64,")[1];

Splits the variable string at "base64," than take the second part.

edited Nov 12 '18 at 15:47

answered Jul 28 '16 at 10:07

Jonas Wilms

132,000
20
149
151

1

I don't understand why so many of the accepted answers have wacky regex solutions. This is simple to understand and executes really quickly. Any downsides? – Joshua Ohana Jan 17 '19 at 20:30
5

@JoshuaOhana well if there is another "base64" in the encoded string ... otherwise not that i know ... – Jonas Wilms Jan 17 '19 at 20:36

score 5 · Answer 3 · answered May 13 '17 at 14:10

5

This worked for me :

var strImage = strToReplace.split(',')[1];

answered May 13 '17 at 14:10

Adrita Sharma

21,581
10
69
79

score 1 · Answer 4 · answered Aug 11 '17 at 11:31

1

I came across this question looking for a way to strip any header. So just wanted to share this:

Regex.Replace(strToReplace, @"^.+?(;base64),", string.Empty))

Got this from an excellent answer which describes how to:

Match any characters as few as possible until a "abc" is found, without counting the "abc".

answered Aug 11 '17 at 11:31

Daan van Hulst

1,426
15
32

I like this replace answer because it not only handles any file type, but also doesn't error if you are passed a base64 string that _isn't_ prefixed with data: `file.base64.replace(/^.+?(;base64),/, '')` – Titan Oct 18 '21 at 10:40

score 0 · Answer 5 · edited Dec 28 '19 at 13:09

0

use this regex

/[data:image\/[a-z]*;[a-z0-9]*,.*]/gm

edited Dec 28 '19 at 13:09

Miss Chanandler Bong

4,081
10
26
36

answered Dec 28 '19 at 11:54

karzan

31
4

score -1 · Answer 6 · answered Nov 19 '17 at 17:12

-1

You can use startWith so you won't have to scan all the object. it's performance should be much better

answered Nov 19 '17 at 17:12

Amor

77
2
5

score -1 · Answer 7 · answered Dec 30 '20 at 06:31

-1

This worked for me Swift 5:

let ourBase64String:String = "base64 string"
let base64StringArray:[String] = ourBase64String.components(separatedBy: "base64,")
if(attachmentArray.count > 0){
   print(attachmentArray[1])
}

answered Dec 30 '20 at 06:31

Thomas Paul

355
5
13

How can I strip the data:image part from a base64 string of any image type in Javascript

7 Answers7

Linked