Как конвертировать изображение в 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

По предложению @abadalyan, верните обещание от вашего getBase64Image,

Также не забудьте проверить статус ответа с помощью readyState а также status и обрабатывать любые ошибки, используя XMLHttpRequest.onerror а также XMLHttpRequest.ontimeout с использованием reject обратный вызов обещания.

Вы также должны проверить FileReader ошибки с FileReader.onerror а также FileReader.onabort или вы могли бы использовать 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">

Answer 2

Чтобы получить значение base64 в getPDF Функция вы можете использовать обещания.

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();
    });    
}