我想将图像从 URL 转换为 Base 64,并将其存储在某种状态中以供以后使用。
如何从 fetch() 返回数据?
我可以使用 CORS 安全图像和 HTML Canvas 使其工作,但这不适用于公共(public)域。
openImage = (index) => {
const url = formatURLs[index];
const base64 = this.getBase64Image(url);
this.setState(prevState => ({
currentImage: index,
currentImagebase64: base64
}));
}
getBase64Image(url) {
fetch(url).then(r => r.blob()).then(blob => {
var reader = new FileReader();
reader.onload = function() {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
return b64;
};
reader.readAsDataURL(blob);
});
}
当我console.log(reader.result)时,它将按预期输出base64。
但是,当我返回 b64 时,它返回到 openImage 为“未定义”。
最佳答案
getBase64Image 是异步的,因此当以同步方式调用它时,它将返回未定义。
你可以尝试这样的事情
openImage = async (index) => {
const url = formatURLs[index];
const base64 = await this.getBase64Image(url);
this.setState(prevState => ({
currentImage: index,
currentImagebase64: base64
}));
}
async getBase64Image(url) => {
const response = await fetch(url);
const blob = await response.blob();
const reader = new FileReader();
await new Promise((resolve, reject) => {
reader.onload = resolve;
reader.onerror = reject;
reader.readAsDataURL(blob);
});
return reader.result.replace(/^data:.+;base64,/, '')
}
关于javascript - 如何从 fetch Promise 返回 Base64 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57346889/