Get base64 image from URL with Javascript

Question

I have a snippet, that requests an image from a URL:

var toDataURL = url => fetch(url, {mode: "no-cors"})
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


toDataURL('https://www.google.hu/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

Code snippet is taken from this thread

This piece of code requests the google logo and it works just fine. I can see the successful image response in the network tab, I can see the image itself, also the base64 code is returned to the console as it should (you can try it by copying and pasting it to a Chrome console)

However, if I change the url to this: https://images.dog.ceo/breeds/husky/n02110185_12748.jpg

I don't get the base64 code back in the console. The request is successful, it is visible in the response, but the base64 is not returned.

I tried it with several images, with pngs most of the time it works, with jpegs never.

Are there some additional settings in the FileReader api I'm missing?

For jpeg, does modifying {mode: "no-cors"} to {mode: "no-cors",headers:{'content-type':"image/jpeg"}} work? — ibrahim tanyalcin
– ibrahim tanyalcin, Commented May 16, 2018 at 11:31
If you look at the images.dog.ceo/breeds/husky/n02110185_12748.jpg source, the response header does not contain Allow-Access-Origin . So from another domain you will never get this client side. However if you open the location, then open the console and paste your code, you will see that the dataURL will be logged. — ibrahim tanyalcin
– ibrahim tanyalcin, Commented May 16, 2018 at 11:44
Ahh, you are right. I totally missed it. So if I want to get an image in base64 (the api I'm calling is returning urls) I have to make sure the webserver (their webserver) is configured with Allow-Access-Origin header for image requests? — marchello
– marchello, Commented May 16, 2018 at 11:52
yes. For images etc. I usually allow all domains, that is "*" wildcard — ibrahim tanyalcin
– ibrahim tanyalcin, Commented May 16, 2018 at 11:55

ibrahim tanyalcin · Accepted Answer · 2018-05-16 12:02:16Z

1

If you look at the images.dog.ceo/breeds/husky/n02110185_12748.jpg source, the response header does not contain Allow-Access-Control-Origin (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) .

So from another domain you will never get this client side. However if you open the location, then open the console and paste your code, you will see that the dataURL will be logged.

Consider white-listing domains and adding the appropriate header if possible, for some inspiration:

Access-Control-Allow-Origin Multiple Origin Domains?

answered May 16, 2018 at 12:02

ibrahim tanyalcin

6,5634 gold badges21 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Get base64 image from URL with Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related