使用 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

这段代码请求 google 徽标，并且运行正常。我可以在网络选项卡中看到成功的图像响应，我可以看到图像本身，base64 代码也按原样返回到控制台（您可以通过将其复制并粘贴到 Chrome 控制台来尝试）

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

我没有在控制台中返回 base64 代码。请求成功，在response中可见，但是没有返回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 将被记录。

考虑 white-listing 个域并在可能的情况下添加适当的 header，以获得一些灵感：

Access-Control-Allow-Origin Multiple Origin Domains?

使用 Javascript 从 URL 获取 base64 图像

Get base64 image from URL with Javascript

javascript

base64

image-conversion

fileapi