Error with downloading image as data url

Question

So, i was doing a link to download an image from a data url(a LARGE one):

<a download='fileName' href="data:image/png;base64,/9j/4WSsRX...">something</a>

However, whenever i try to click in that link i receive an error telling me some net problems.

I have make a fiddle test, but its LARGE(15mb of text) and it will take sometime to load:

https://jsfiddle.net/jjydp1ek/

As the jsfiddle is hard to load, i added a file in mediafire: http://www.mediafire.com/download/p85y1g442ne9v6m/new++7.html

The test is an image with the same data url value as the link, the image is visible, however i see that the option to open image in a new tab on chrome isn't working.

I do it with canvas in ie 11 and is failing too

Questions:

It is ever possible to make it work with the download link as it is now?

Is there a limit size with the data url to download a file, which is?

How do i do to make the user able to download that image?

Also, ask questions here, or correct any error in the text you see if you think its not understandable.

Thanks.

Answer 1

I have a 70Mb broadband and a powerhouse of a PC and that JS fiddle won't even open.

I don't think it's feasible to have a 15MB encoded string, since that has to be downloaded onto the page each time on every visit. I would try the following:

• Optimise the image, you could incorporate gulp-imagemin if you have/want to have Gulp for a build system. I think there are alternatives for Grunt if you wanted to go that way.
• Store the file on the server and just place a link to the path, this is the preferred solution.

In response to your questions

The limit:

Length limitations

Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters.

Source: data URIs - MDN

Downloading

The above suggestion on optimising the image as small as you can get without losing quality if that's a concern. Try it then. If not, it's not a problem to give the user a link to the image / display it on the page. The user can right click and save.

Note

By the time I finished writing this response JSFiddle timed out.