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

代码片段来自此线程

这段代码要求使用Google徽标，并且效果很好。 我可以在“网络”标签中看到成功的图像响应，可以看到图像本身，还可以将base64代码按原样返回到控制台（您可以通过将其复制并粘贴到Chrome控制台中来尝试）

但是，如果我将网址更改为此： https://images.dog.ceo/breeds/husky/n02110185_12748.jpg : 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源，则响应标头不包含Allow-Access-Control-Origin（ https://developer.mozilla.org/en-US/docs/ Web / HTTP / Headers / Access-Control-Allow-Origin ）。

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

考虑将域列入白名单，并在可能的情况下添加适当的标头，以获取一些启发：

访问控制允许原始多个域？