0

Data-URI for a red dot:

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' height='32' width='32' alt='Image'>

What are the parts here if any? For instance, are the first 20 characters reserved for the type, the next 2 for opacity, etc? If anyone can point me to the right place, I cannot find anything on the intergoogles!

OK for a PNG there are similarities in the strings: iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAh7sky7OeYKB8+tP6XGdtx//a/E2m63tavY/hRM=qW+lVt1OD8sxrieE5j7ebvK3eiz+1==eV=Crr4=

and

iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAAB3RJTUUH1QEHDxEhOnxCRgAAAAlwSFlzAAAK8AAACvABQqw0mAAAAXBJREFUeNrtV0FywzAIxJ3+K/pZyctKXqamji0htEik9qEHc3JkWC2LRPCS6Zh9HIy/AP4FwKf75iHEr6eU6Mt1WzIOFjFL7IFkYBx3zWBVkkeXAUCXwl1tvz2qdBLfJrzK7ixNUmVdTIAB8PMtxHgAsFNNkoExRKA+HocriOQAiC+1kShhACwSRGAEwPP96zYIoE8Pmph9qEWWKcCWRAfA/mkfJ0F6dSoA8KW3CRhn3ZHcW2is9VOsAgoqHblncAsyaCgcbqpUZQnWoGTcp/AnuwCoOUjhIvCvN59UBeoPZ/AYyLm3cWVAjxhpqREVaP0974iVwH51d4AVNaSC8TRNNYDQEFdlzDW9ob10YlvGQm0mQ+elSpcCCBtDgQD7cDFojdx7NIeHJkqi96cOGNkfZOroZsHtlPYoR7TOp3Vmfa5+49uoSSRyjfvc0A1kLx4KC6sNSeDieD1AWhrJLe0y+uy7b9GjP83l+m68AJ72AwSRPN5g7uwUAAAAAElFTkSuQmCC

The first 20-30 are similar with minor variancies: iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPA

But I cannot determine any format/pattern. Using = or / I will look at the RFC, but this is still open...

Eli Barzilay
  • 29,301
  • 3
  • 67
  • 110
roberthuttinger
  • 1,172
  • 1
  • 17
  • 31

1 Answers1

2
 data:          Required, data-URI protocol
 image/png      Required, MIME-type
 ;charset=UTF8  Optional, character encoding
 ;base64        Optional
 ,              Required
 ...            Optional:
                Note: When ;base64 is set, a valid base64 string has to be given

See also:

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • I cannot find the actual format or something similar. I updated the question – roberthuttinger Mar 09 '12 at 17:24
  • 1
    @roberthuttinger Your question has nothing to do with base 64, as there is no magic going on: [JS base64 enc implementation](http://stackoverflow.com/a/246813)). The meaning of the head depends on the file type. For example, have a look at the [PNG's header](http://en.wikipedia.org/wiki/Portable_Network_Graphics#Technical_details). – Rob W Mar 09 '12 at 17:36
  • but I assume that by adding the mime type in the data portion of the attribute, those data points are omitted. I have opened a PNG with a hex editor, and I can find no correlation outside of the first 20-30 characters of the image data... – roberthuttinger Mar 09 '12 at 18:26
  • because of the unclear question I will mark this answered there are some good links here. Ill investigate more! – roberthuttinger Mar 09 '12 at 18:32
  • @roberthuttinger They are not omitted, because the base64 string is constructed independently of the given MIME-type. The MIME-type in the data-URI is used to initially used to determine the type. When the headers say "PNG", and the MIME-type "JPG", the data-URI will still be parsed as PNG. You should not compare the first 20-30 characters of the base64 string, but check the headers in the binary. The [`atob`](https://developer.mozilla.org/en/DOM/window.atob) function is capable of decoding base-64 strings. – Rob W Mar 09 '12 at 18:46