0

我看过很多关于将图像转换为 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();
  }
4

2 回答 2

1

正如@abadalyan 所建议的那样，从您的getBase64Image.

也不要忘记使用和使用Promise 的回调来检查响应的状态readyState，status并处理任何错误。XMLHttpRequest.onerrorXMLHttpRequest.ontimeoutreject

您还必须使用and检查FileReader错误，或者您可以使用回调而不是确保即使您收到读取错误，promise 也始终可以解决。FileReader.onerrorFileReader.onabortFileReader.loadendFileReader.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">

于 2019-03-16T12:14:16.650 回答
1

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

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();
    });    
}
于 2019-03-16T11:07:57.363 回答