How to get around IE8 32k limit on data:uri on base64 encode?

Question

I need to send an html response to the browser containing a 1920x1080 png. It's a screenshot taken by an html query.

I encode the image in base64 and sends it embedded as an text/html content-type. Something simple like :

<HTML><HEAD>Whatever</HEAD><BODY><img src="data:image/png;base64,data"/></BODY></HTML>

It works fine on FF and Chrome, the problem is I need to support IE8. IE8 as a limit on the length of the data:uri.

If I compress the image so the png encoding is under 32k (about 600x500) I lose too much information.

What would be the easiest work around for this problem? (I don't have access to a server to host the image or such)

Any specific reason why you want to send a 1920x1080 image via `src="data:`? — NullUserException, Aug 27 '10 at 17:35
[This link](http://danielmclaren.com/node/90) seems to have a relevant solution, however, you will either need access to a server, or a client-side javascript module with routing that can fake a server response. Haven't tried it myself though. — Danny Varod, Aug 10 '13 at 22:07

score 18 · Answer 1 · answered Aug 30 '10 at 14:58

18

In the end we dropped IE8 support.

I'm lucky it's for internal debugging purpose only.

The problem still stand though. Hopefully IE9 won't have data:uri limit.

answered Aug 30 '10 at 14:58

Martin

3,960
7
43
43

19

My favorite solution of all – Code Whisperer Jan 23 '14 at 14:15
i can't stop laughing at this =))))))))))) – mhesabi Jun 19 '17 at 07:45

score 4 · Answer 2 · answered Aug 27 '10 at 17:35

4

You could always break apart the image into 4 (or more) and encode each section separately.

answered Aug 27 '10 at 17:35

cobbal

69,903
20
143
156

can you please provide a link to example to, how to do that? – hemc4 Dec 21 '12 at 09:01
Yes @cobbal, can you post an example on how to do it? – SexyBeast Feb 14 '13 at 05:29
2

I assume cobbal meant that you can display 4 images next to each other which, like a mosaic, will appear as one big image. This can be done by splitting the source image into 4 using any image editor, encoding each part separately, then placing them separately in the HTML using CSS to position them correctly. – Danny Varod Aug 10 '13 at 22:06
You could split your base64 encoded string into smaller chunks. And reassemble the chunks into a string on the other end and display a single image. No need to render multiple images and align them. – gfullam Nov 13 '14 at 19:33
1

@gfullam No, because the *resulting base64 encoded string* must be < 32k, not the *original image's disk size*. – This company is turning evil. Feb 26 '15 at 13:18

score 0 · Answer 3 · edited Apr 14 '14 at 14:10

Base64 encoded data URI is working fine in IE whose version is greater than or equal to 9. Since there is no data URI limitation for IE 9. Also I tried to fix this IE 8 issue. But I couldn't able to fix this issue. For Work around,storing images in somewhere inside your application & retrieve it back from application whenever displaying it.

In Rails views: (supports if IE >=9)

<b><%= ('&lt;img src="data:image/jpg;base64,%s">' % Base64.encode64(@chart.to_blob)).html_safe %></b>

In Rails views: (Supports all browsers)

<b><%= image_tag @chart+".png" %></b>

score 0 · Answer 4 · answered Aug 27 '10 at 18:02

0

Couldn't you just store the image somewhere, return its path, and then change src to the path you just generated?

answered Aug 27 '10 at 18:02

fresskoma

25,481
10
85
128

No, I cannot store the image elsewhere or make its path available for outside request. – Martin Aug 27 '10 at 18:24

How to get around IE8 32k limit on data:uri on base64 encode?

4 Answers4

Linked