请求blob图像并使用fetch API转换为base64

Question

我有一些图像将在 React 应用程序中显示。我向服务器执行 GET 请求，该请求返回 BLOB 格式的图像。然后我将这些图像转换为 Base64。最后，我在图像标签的 src 属性内设置这些 base64 字符串。

最近我开始使用 Fetch API。我想知道是否有一种方法可以一次性完成转换。

下面的示例解释了我到目前为止的想法和/或这是否可以通过 Fetch API 实现。我还没在网上找到任何东西。

  let reader = new window.FileReader();
  fetch('http://localhost:3000/whatever')
  .then(response => response.blob())
  .then(myBlob => reader.readAsDataURL(myBlob))
  .then(myBase64 => {
    imagesString = myBase64
  }).catch(error => {
    //Lalala
  })

Answer 1

FileReader.readAsDataURL

的回归不是承诺。你必须按照老方法做。

fetch('http://localhost:3000/whatever')
.then( response => response.blob() )
.then( blob =>{
    var reader = new FileReader() ;
    reader.onload = function(){ console.log(this.result) } ; // <--- `this.result` contains a base64 data URI
    reader.readAsDataURL(blob) ;
}) ;

通用功能：

function urlContentToDataUri(url){
    return  fetch(url)
            .then( response => response.blob() )
            .then( blob => new Promise( callback =>{
                let reader = new FileReader() ;
                reader.onload = function(){ callback(this.result) } ;
                reader.readAsDataURL(blob) ;
            }) ) ;
}

//Usage example:
urlContentToDataUri('http://example.com').then( dataUri => console.log(dataUri) ) ;

//Usage example using await:
let dataUri = await urlContentToDataUri('http://example.com') ;
console.log(dataUri) ;

Answer 2

感谢@GetFree，这是它的

async/await

版本，并承诺错误处理：

const imageUrlToBase64 = async url => {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((onSuccess, onError) => {
    try {
      const reader = new FileReader() ;
      reader.onload = function(){ onSuccess(this.result) } ;
      reader.readAsDataURL(blob) ;
    } catch(e) {
      onError(e);
    }
  });
};

用途：

const base64 = await imageUrlToBase64('https://via.placeholder.com/150');

Answer 3

如果有人需要在 Node.js 中执行此操作：

const fetch = require('cross-fetch');
const response  = await fetch(url);
const base64_body = (await response.buffer()).toString('base64');

Answer 4

我觉得这个方法也可以：

function fetchImage(dataUrl: string): Promise<string> {
    return new Promise((resolve, reject) => {
      const img: HTMLImageElement = new Image();
      img.src = dataUrl;
      img.onload = () => resolve(img.src);
      img.onerror = () => reject();
    });
}