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

Improve this question
1
  • 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...." /> Commented Feb 3, 2020 at 15:43

3 Answers 3

Reset to default
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?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for replay, do you have any suggestion to workaround (see last edit in main post)?
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

Improve this answer

5 Comments

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"
Yes, if downloading it is what you want to do, that should be the way to go. Glad I helped
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 <canvas />. I was successful doing that even with 20MB images
Thanks! Then, how do I make a donwload link like <a href="..." download="image.jpg">image</a>?
You can always programatically re-create a link with the said base64 content (`<a href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB..." />) 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.
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...." />

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.