Firefox and Chrome won't decode base64 image or pdf files

Question

I\'m trying to decode a base64 encoded images on the browser by using the data uri scheme.

This is what my html looks like:

Answer 1

Chrome and Firefox can, very likely, open TIF images -- if you tell them, they are TIF images. Currently in your example you are telling them, they are PNG images, which ought to be the problem... Try:

<img src="data:image/tiff;base64,base64_string_here" 
  alt="base64 image name" width="600" height="400" border="1" />

Answer 2

I know this is a really old question but I have recently ran into the same issue. (Stemming from USPS label returns) I fixed it by converting the Base64 string encoded TIFF to a Base64 string Bitmap image (though you could use any image type that you wish).

I was using C# to convert the images:

    Byte[] arrTiff = Convert.FromBase64String(FixBase64ForImage(oeVS.LabelImage));
    System.IO.MemoryStream msTiff = new System.IO.MemoryStream(arrTiff);
    Bitmap bmpTiff = new Bitmap((Bitmap)Image.FromStream(msTiff));
    System.IO.MemoryStream msBmp = new System.IO.MemoryStream();
    bmpTiff.Save(msBmp, System.Drawing.Imaging.ImageFormat.Bmp);
    Byte[] arrBmp = msBmp.ToArray();
    string sBMP64 = Convert.ToBase64String(arrBmp);

Then in the html/javascript you can use this to display the label where sBMP64 is the result from above.

<img src='data:image/bmp;base64,sBMP64'>

BMP worked for my purposes, but here's a table of image support by browser: https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Answer 3

In fact, even if you supply correct MIME type, Chrome, Firefox and Opera do not support .TIF files natively: they require a plugin to deal with them.

There's a useful summary of browser support for image files here: http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support