CODEWITHSUNDEEP
javascripthtmlinternet-explorerinternet-explorer-8data-uri
GreatDane
GreatDane

Reputation: 693

Any workaround for the 32KB limit on data:uri in IE8?

I want to load a picture in a HTML img element on a button click through JavaScript. The JavaScript calls an ActiveX function and gets a BASE64 encoded, string representing the image, which it then puts in the img src like this:

var message = activex.GetImage(param);
var img = document.getElementById("imgPhoto").src = "data:image/jpeg;base64, ".concat(message);

The problem is I tested it in a recent IE with backwards compatibility to IE8 and it worked, but the actual IE8 has a 32KB restriction on data:uri, which means my picture gets cut off and only ~32KB of it are displayed.

Solutions:

  1. I'm thinking of converting the BMPs to JPEGs, but I still can't guarantee that they won't exceed the limit.
  2. I've also seen this approach, where the image is loaded through CSS in MHTML, but I can't see how I could rewrite the CSS file every time. As I understand it, JavaScript can't really write files on your disk.

Anyone managed to get past this limitation, considering my restrictions?

Upvotes: 2

Views: 811

Answers (1)

Sampson
Sampson

Reputation: 268364

I would suggest avoiding the use of BMP entirely - use JPEGs instead. You'll get much smaller file-sizes and far better performance. Not to mention, you'll come in under that 32kb limit more often than not. In the cases where 32kb is still not enough, it's often times the case that you can shave off a few more bytes by removing unnecessary meta-data (common with apps like Adobe Photoshop) from the image file itself. In the event 32kb is still not enough after compression and removal of meta-data, I would suggest you consider again if a data URI is appropriate.

Upvotes: 2

Related Questions