如何将图像转换为base64？

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检查响应的status并使用XMLHttpRequest.onerror和XMLHttpRequest.ontimeout使用Promise的reject回调来处理任何错误。

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

这是错误处理的示例：

 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">