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, May 16 '18 at 11:31
If you look at the https://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, May 16 '18 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, May 16 '18 at 11:52
yes. For images etc. I usually allow all domains, that is "*" wildcard — ibrahim tanyalcin, May 16 '18 at 11:55
Thanks. I you want just paste your 2nd reply as an answer and I'll accept it. — marchello, May 16 '18 at 11:59

score 1 · Accepted Answer · answered May 16 '18 at 12:02

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?

Get base64 image from URL with Javascript

1 Answers1