如何将图像转换为base64？

Question

I have seen many tutorials about converting image to base64. The work I did is based on that. I have created a function inside which this conversion will take place. ButI need to pass image like below function and get console.log like below.

I am not sure how to do it?

  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

To receive the base64 value in the getPDF function you can use 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

As suggested by @abadalyan, return a Promise from your getBase64Image .

Also do not forget to check the status of the response with readyState and status and handle any errors using XMLHttpRequest.onerror and XMLHttpRequest.ontimeout using the reject callback of the Promise.

You also have to check the FileReader errors with FileReader.onerror and FileReader.onabort , or you could use the FileReader.loadend callback instead of FileReader.load to make sure the promise always resolves even when you get a read error.

Here is an example with error handling:

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