使用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將被記錄。

考慮將域列入白名單，並在可能的情況下添加適當的標頭，以獲取一些啟發：

訪問控制允許原始多個域？