22

If I have :

<img src="data:image/gif;base64,R0lGODlhtwBEANUAAMbIypOVmO7v76yusOHi49AsSDY1N2NkZvvs6VVWWPDAutZOWJ+hpPPPyeqmoNlcYXBxdNTV1nx+gN51c4iJjEdHSfbc19M+UOeZk7m7veSMiNtpauGBfu2zrc4RQSMfIP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAC3AEQAAAb/QJBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq/b7/i8fs" />

How can I parse the data part into:

  • Mime type (image/gif)
  • Encoding (base64)
  • Image data (the binary data)

5 Answers 5

31

EDIT: expanded to show usage

var regex = new Regex(@"data:(?<mime>[\w/\-\.]+);(?<encoding>\w+),(?<data>.*)", RegexOptions.Compiled);

var match = regex.Match(input);

var mime = match.Groups["mime"].Value;
var encoding = match.Groups["encoding"].Value;
var data = match.Groups["data"].Value;

NOTE: The regex applies to the input shown in question. If there was a charset specified too, it would not work and would have to be rewritten.

5
  • I tried this but using matches.Groups[0].ToString() in c# it returned everything instead of the mime part. Can you expand the code.
    – Steven
    Apr 19, 2011 at 10:03
  • Here's my code: string pattern= @"data:(?<mime>[\w/]+);(?<encoding>\w+),(?<data>.*)"; Match matches = Regex.Match(imgsrc, pattern, RegexOptions.IgnoreCase | RegexOptions.Singleline); HttpContext.Current.Response.Write("<br />match: " + matches.Groups[0].ToString());
    – Steven
    Apr 19, 2011 at 10:16
  • 1
    I updated the MIME part of the regexp slightly to be able to use with MIME types like application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, where the \w and / is not enough to match (since . and - are not "word" characters). Dec 30, 2013 at 15:07
  • 1
    Doesn't work for data:text/plain;charset=utf-8;base64,IVRSTlMJVFJ
    – Roger Far
    Nov 23, 2016 at 23:33
  • I know it's explicit in the question, but I found it was easier to parse without a regular expression by getting the position of the comma and then dealing with the media type/encoding part. The logic was clearer than a complicated regular expression, I could handle cases like @YesMan85 above, and I was getting a bit worried about regex performance for a long data string.
    – Eric Pohl
    Mar 22, 2017 at 16:11
18

Actually, you don't need a regex for that. According to Wikipedia, the data URI format is

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

so just do the following:

byte[] imagedata = Convert.FromBase64String(imageSrc.Substring(imageSrc.IndexOf(",") + 1));
4
  • Thanks for the quick response, but I would like to know the mime-type as well so that I can write the data into a file with the right extension, .png if the user submits image/png, .gif if user submits image/gif etc.
    – Steven
    Apr 19, 2011 at 9:58
  • 1
    I think this part: imageSrc.IndexOf(",") should be imageSrc.IndexOf(",")-1 to prevent the "," from being included in the data.
    – Steven
    Apr 19, 2011 at 10:37
  • 3
    I'd probably use this method to remove the data part, then use Split(';') to get the other parts. Also, think it should be Indexof(",")+1, not -1.. of course, in real code you would want to check for -1 (not found) result also.
    – eselk
    May 14, 2013 at 1:34
  • @Steven you're right, but it's actually +1 not -1.. Edited my answer
    – jazzcat
    Mar 30, 2017 at 15:18
2

I faced also with the need to parse the data URI scheme. As a result, I improved the regular expression given on this page specifically for C# and which fits any data URI scheme (to check the scheme, you can take it from here or here.

Here is my solution for C#:

private class DataUriModel {
  public string MediaType { get; set; }
  public string Type { get; set; }
  public string[] Tree { get; set; }
  public string Subtype { get; set; }
  public string Suffix { get; set; }
  public string[] Params { get; set; }
  public string Encoding { get; set; }
  public string Data { get; set; }
}

static void Main(string[] args) {
  string s = "data:image/prs.jpeg+gzip;charset=UTF-8;page=21;page=22;base64,/9j/4AAQSkZJRgABAQAAAQABAAD";
  var parsedUri = GetDataURI(s);
  Console.WriteLine(decodedUri.Type);
  Console.WriteLine(decodedUri.Subtype);
  Console.WriteLine(decodedUri.Encoding);
}

private static DataUriModel GetDataURI(string data) {
  var result = new DataUriModel();
  Regex regex = new Regex(@"^\s*data:(?<media_type>(?<type>[a-z\-]+){1}\/(?<tree>([a-z\-]+\.)+)?(?<subtype>[a-z\-]+){1}(?<suffix>\+[a-z]+)?(?<params>(;[a-z\-]+\=[a-z0-9\-\+]+)*)?)?(?<encoding>;base64)?(?<data>,+[a-z0-9\\\!\$\&\'\,\(\)\*\+\,\;\=\-\.\~\:\@\/\?\%\s]*\s*)?$", RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.Multiline);
  var match = regex.Match(data);

  if (!match.Success)
    return result;

  var names = regex.GetGroupNames();
  foreach (var name in names) {
    var group = match.Groups[name];
    switch (name) {
      case "media_type": result.MediaType = group.Value; break;
      case "type": result.Type = group.Value; break;
      case "tree": result.Tree = !string.IsNullOrWhiteSpace(group.Value) && group.Value.Length > 1 ? group.Value[0..^1].Split(".") : null; break;
      case "subtype": result.Subtype = group.Value; break;
      case "suffix": result.Suffix = !string.IsNullOrWhiteSpace(group.Value) && group.Value.Length > 1 ? group.Value[1..] : null; break;
      case "params": result.Params = !string.IsNullOrWhiteSpace(group.Value) && group.Value.Length > 1 ? group.Value[1..].Split(";") : null; break;
      case "encoding": result.Encoding = !string.IsNullOrWhiteSpace(group.Value) && group.Value.Length > 1 ? group.Value[1..] : null; break;
      case "data": result.Data = !string.IsNullOrWhiteSpace(group.Value) && group.Value.Length > 1 ? group.Value[1..] : null; break;
    }
  }

  return result;
}
1
  • Thanks, this worked for me. This was the first time I ran into the C# range operator and since I'm using an older version of C# I had to substitute the uses of the Range Operator with calls to Substring(). e.g. instead of group.Value[1..], I used group.Value.Substring(1) Feb 9, 2021 at 20:09
1

Data URI's have a bit of complexity to them, they can contain params, media type, etc... and sometimes you need to know this info, not just the data.

To parse a data URI and extract all of the relevant parts, try this:

/**
 * Parse a data uri and return an object with information about the different parts
 * @param {*} data_uri 
 */
function parseDataURI(data_uri) {
    let regex = /^\s*data:(?<media_type>(?<mime_type>[a-z\-]+\/[a-z\-\+]+)(?<params>(;[a-z\-]+\=[a-z\-]+)*))?(?<encoding>;base64)?,(?<data>[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*)$/i;
    let result = regex.exec(data_uri);
    let info = {
        media_type: result.groups.media_type,
        mime_type: result.groups.mime_type,
        params: result.groups.params,
        encoding: result.groups.encoding,
        data: result.groups.data
    }
    if(info.params)
        info.params = Object.fromEntries(info.params.split(';').slice(1).map(param => param.split('=')));
    if(info.encoding)
        info.encoding = info.encoding.replace(';','');
    return info;
}

This will give you an object that has all the relevant bits parsed out, and the params as a dictionary {foo: baz}.

Example (mocha test with assert):

describe("Parse data URI", () => {
    it("Should extract data URI parts correctly",
        async ()=> {
            let uri = 'data:text/vnd-example+xyz;foo=bar;bar=baz;base64,R0lGODdh';
            let info = parseDataURI(uri);
            assert.equal(info.media_type,'text/vnd-example+xyz;foo=bar;bar=baz');
            assert.equal(info.mime_type,'text/vnd-example+xyz');
            assert.equal(info.encoding, 'base64');
            assert.equal(info.data, 'R0lGODdh');
            assert.equal(info.params.foo, 'bar');
            assert.equal(info.params.bar, 'baz');
        }
    );
});

1
  • final part of the regex captures trailing whitespace, so your info.data can end with spaces and tabs and such like. Move the final bracket before the \s eg: regex = /^\sdata:(?<media_type>(?<mime_type>[a-z\-]+\/[a-z\-\+]+)(?<params>(;[a-z\-]+\=[a-z\-]+)))?(?<encoding>;base64)?,(?<data>[a-z0-9\!\$\&\'\,()*\+\,\;\=\-\._\~\:\@\/\?\%\s])*\s*$/i; Oct 13, 2021 at 0:53
-1

Here is my regular expression where I had to separate the mime-type (image/jpg) as well.

^data:(?<mimeType>(?<mime>\w+)\/(?<extension>\w+));(?<encoding>\w+),(?<data>.*)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.