我有一个片段,它从 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 中是否缺少一些其他设置?
最佳答案
如果您查看 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 ,以获取一些灵感:
关于javascript - 使用 Javascript 从 URL 获取 Base64 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50369694/