Question

我看过很多关于将图像转换为base64的教程。我所做的工作就是基于此。我创建了一个将在其中进行转换的函数。但是我需要像下面的函数那样传递图像，并像下面那样获取console.log。

我不确定该怎么做？

  getPDF() {
    let image = "assets/icon/logo.png";
    let imageData = this.getBase64Image(image);
    console.log("imageData", imageData);
  }

  getBase64Image(img) {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", img, true);
    xhr.responseType = "blob";
    xhr.onload = function (e) {
      console.log(this.response);
      var reader = new FileReader();
      reader.onload = function (event) {
        var res = event.target["result"];
      }
      var file = this.response;
      reader.readAsDataURL(file)
    };
    xhr.send();
  }

Answer 1

要在getPDF函数中接收base64值，可以使用promises。

getPDF() {
    let image = "assets/icon/logo.png";
    this.getBase64Image(image).then(imageData => {
       console.log("imageData", imageData);
    }).catch(err => {
        console.log(err);
    });

}

getBase64Image(img) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", img, true);
        xhr.responseType = "blob";
        xhr.onload = function (e) {
          console.log(this.response);
          var reader = new FileReader();
          reader.onload = function (event) {
            resolve(event.target["result"]);
          }
          reader.onerror = function(e) {
             reject(e);
          };
          var file = this.response;
          reader.readAsDataURL(file)
        };
        xhr.onerror = function (e) {
            reject(e);
        }
        xhr.send();
    });    
}

Answer 2

根据@abadalyan的建议，从您的getBase64Image中返回一个承诺。

也不要忘记使用readyState和status检查响应的状态，并使用XMLHttpRequest.onerror回调使用XMLHttpRequest.ontimeout和reject处理任何错误的承诺。

您还必须使用FileReader和FileReader.onerror检查FileReader.onabort错误，或者可以使用FileReader.loadend回调而不是FileReader.load来确保即使遇到读取错误，promise也始终会解决。

以下是错误处理的示例：

function getBase64Image(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.onload = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const reader = new FileReader();
        reader.readAsDataURL(xhr.response);
        reader.onerror = e => reject(new Error('Reading error.', e));
        reader.onabort = e => reject(new Error('Reading abort.', e));
        reader.onload = () => resolve(reader.result);
      } else {
        reject(request.statusText);
      }
    };
    xhr.onerror = e => reject(new Error('Network error.', e));
    xhr.ontimeout = e => reject(new Error('Timeout error.', e));
    xhr.send();
  });
}

getBase64Image('https://cors-anywhere.herokuapp.com/https://loremflickr.com/100/100').then(image => {
  console.log(image);
  document.querySelector('#img1').src = image;
}).catch(e => console.error(e.message || e));
  
getBase64Image('wrong-url').then(image => {
  console.log(image);
  document.querySelector('#img2').src = image;
}).catch(e => console.error(e.message || e));

<img id="img1" src="" alt="No image yet">
<img id="img2" src="" alt="No image yet">

如何将图像转换为base64？

2 个答案: