0

Using javascript I convert a jpg into data url (I get a string like data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...), the url I get is working as href in Firefox, but it is not working in Chrome. Do you have any suggestion? Maybe there's a limit in Chrome?

EDIT:

  1. I use the data url as href in an anchor with attribute download (link should force an open/download popup)

  2. If I pass a smaller image it's working on Chrome

You can see an example here:

https://jsfiddle.net/ex180Lyu/

<a href="data:image/jpeg;base64,/9j/4AAQSkZJR..." download="image.jpg">CLICK</a>

It's working in Firefox but not in Chrome

Andrea
  • 148
  • 1
  • 9
  • This suggestion may not suit your requirement but setting the img tag src attribute should work in any browser <`img src="data:image/jpeg;base64,/9j/4AAQS...." />` – T3.0 Feb 03 '20 at 15:43

3 Answers3

1

Chrome stops supporting data URI s in new window. Here is the issue reported

https://github.com/piskelapp/piskel/issues/729

If your need is testing, you can do like this, which supports any browser

<img src="data:image/jpeg;base64,/4AAQSkZJRgABAQAAAQAB...." />

Beingnin
  • 2,288
  • 1
  • 21
  • 37
1

Chrome removed the possibility to navigate to data-uris, as Nithin said.

But you'd be fine to set it on any webpage within an <img> tag like this:

 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." alt="Alt text for image"/>

You can also show a download link like this:

<a href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." download="image.jpg">image</a>

If the image is too big to try this method you can always copy it to a canvas. I've been successful with images up to 20MB.

Basically you copy the image to the canvas directly:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..."
img.onload = () => {
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0);
}

Full code here

Andión
  • 1,103
  • 15
  • 26
  • Thanks for reply, instead of an img tag I need an anchor with attribute href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." and attribute download="image.jpg" – Andrea Feb 03 '20 at 16:09
  • Yes, if downloading it is what you want to do, that should be the way to go. Glad I helped – Andión Feb 03 '20 at 16:49
  • I updated the example and added a codesandbox working example. As @khpa said you could be hitting a size limit. If that's the case you can also try copying and pasting the image on a . I was successful doing that even with 20MB images – Andión Feb 04 '20 at 08:03
  • Thanks! Then, how do I make a donwload link like image? – Andrea Feb 04 '20 at 12:23
  • You can always programatically re-create a link with the said base64 content (`) but if it was too long before I guess it would be too long this time. If you right click the image you'd be able to donwload it though. I'll give it a thought now that you updated the question with an example. – Andión Feb 05 '20 at 08:37
1

It is indeed a limit, have you checked this? :

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#Common_problems

a very good answer is this:

What is the maximum length of a URL in different browsers?

khpa
  • 79
  • 1
  • 6