javascript - 使用 Javascript 从 URL 获取 Base64 图像

Question

我有一个片段，它从 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)
  })

代码片段取自this thread

这段代码请求谷歌 Logo 并且它工作得很好。我可以在网络选项卡中看到成功的图像响应，我可以看到图像本身，base64 代码也按应有的方式返回到控制台(您可以通过将其复制并粘贴到 Chrome 控制台来尝试)

但是，如果我将网址更改为:https://images.dog.ceo/breeds/husky/n02110185_12748.jpg

我没有在控制台中返回 Base64 代码。请求成功，在响应中可以看到，但是没有返回base64。

我尝试了几个图像，其中 png 大部分时间都有效，而 jpeg 则从不工作。

FileReader api 中是否缺少一些其他设置？

Answer 1

如果您查看 images.dog.ceo/breeds/husky/n02110185_12748.jpg 源，响应 header 不包含Allow-Access-Control-Origin ( https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin ) 。

因此，从另一个域您将永远无法获得此客户端。但是，如果您打开该位置，然后打开控制台并粘贴代码，您将看到 dataURL 将被记录。

考虑将域列入白名单，并在可能的情况下添加适当的 header ，以获取一些灵感:

Access-Control-Allow-Origin Multiple Origin Domains?