image in base64 constructed from bmp (Uint8Array) not rendering in Safari

Question

I construct Uint8Array (representing BMP), convert it to base64 and store in database. When I try to load image in safari, it fails (no output in error console). However it works in firefox and chrome.

Code transforming arraybuffer with bmp to base64:

 /**
  * @bmpArrayBuffer - new ArrayBuffer() containing BMP
  */
  var toDataURL = function(bmpArrayBuffer) {
    var buffer = new Uint8Array(bmpArrayBuffer),
        bs = "", i = 0, l = buffer.length;
    while (i < l) bs += String.fromCharCode(buffer[i++]);
    return "data:image/bmp;base64," + btoa(bs);
  }

You can test it here: https://codebeautify.org/base64-to-image-converter#

in chrome it renders small image and safari fails

sample base64:

data:image/bmp;base64,Qk16FQAA/wD/AHoAAABsAAAAMAAAABwAAAABACAAAwAAAAAVAAATCwAAEwsAAAAAAAAAAAAAAAD/AAD/AAD/AAAAAAAA/yBuaVcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP//////////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////////////////////////////////////////////////////////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////////////////////////////////////////////////////////////////////////////////////////////////////wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////////////////////////////////////////////////////////////////////////////////////////////////////wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA//////////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA//////////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////////////////////////////////////////////////////////////////////////////////////////////////////wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////////////////////////////////////////////////////////////////////////////////////////////////////wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD///////////////////////////////////////////////////////////////////////////////////////////8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/////////////////////////////////////////////////////////////////////////////////////////////////AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD//////////////////////////////////////////////////////////////////////////////////////////////////////wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP////////////////////////////////////////////////////////////////////////////////////////////////8=

Is anything logged to console, like [in this case](https://stackoverflow.com/questions/27396376/base64-image-tag-in-safari-did-not-showed-up)? — Niklas Higi, Nov 05 '17 at 11:04
`I construct Uint8Array (representing BMP), convert it to base64 and store in database` so many whys? why bmp? why not an compressed image format? why do you store it as base64 in the DB? This increases the amount of data to store by 1/3 without any advantage, why not a BLOB? why do you store it in the DB at all? — Thomas, Nov 05 '17 at 11:12
`When I try to load image in safari, it fails` wich safari? When I had to debug Safari, often there were significant differences between safari on a mac, iphone or windows. And wich version? — Thomas, Nov 05 '17 at 11:14
Those whys are not relevant to the question. BMP, base64, DB are there for a reason, which is not relevant to the problem I'm solving — user1762087, Nov 05 '17 at 12:05
Safari for windows (unfortunately I don't have mac to debug). However iPhone6 has the same problem — user1762087, Nov 05 '17 at 12:13
I understand base64 and DB are requirements, but it seems web browser is also a requirement. So I think "why BMP" is a valid question if you are trying to generate graphics on the web. BMP is a Microsoft format that predates the web but is not necessarily a web-compatible format according to the W3C. Chrome and other browsers are just being nice when they support it. Given Apple and Microsoft's relationship over the years, it does not surprise me that Safari forgot how to render a BMP. — Brian Anderson, Nov 05 '17 at 12:39
So first, Safari for windows is dead since May 9, 2012. **Stop using it right now!** Even for testing. It's just a giant security black hole sucking all the malwares produced the last 5 years, and moreover, it never had the same behavior as on osX, so even less today. — Kaiido, Nov 05 '17 at 13:31
That being said, Safari (11.0.1, you know the one of today) still does support bmp format, but there is something with yours that osX simply don't like. My photoshop tells me that it is an 8bit bmp file, but Safari can display these, when produced from other tools, and this [online tool](http://exif.regex.info/exif.cgi) tells me that it's a 32bit one, but that it doesn't contain Color info, maybe here is the problem? Not sure, I didn't took the time to read your file byte per byte, but Safari can also read 32bits bmp images. — Kaiido, Nov 05 '17 at 13:31

score 0 · Answer 1 · answered Nov 05 '17 at 12:21

It turns out the web in general is not very supportive of BMP files. According to this chart:

https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

and these SO links:

Should bmp files be used for websites

Which graphic file formats are supported by browsers?

While the chart on wikipedia lists that Safari supports BMP images, I question whether the chart is up-to-date or accurate in this regard. I tested your graphic on Chrome and Safari as well. You need to add inline style to the img tag (something like: style="width:50px;height:50px;") to see the graphic on Chrome. It is unviewable on Safari.

If I were you, I would insert a "convert BMP to PNG" step into your workflow and then generate the base64 from the PNG buffer. I think codebeautify.org would definitely be enhanced by having some graphics file conversion utilities.

Thanks, that'll probably be my last resort (I'd never think that some current browser might not fully support BMP) — user1762087, Nov 05 '17 at 14:04

image in base64 constructed from bmp (Uint8Array) not rendering in Safari

1 Answers1