CODEWITHSUNDEEP
javascriptbase64url
user1687891
user1687891

Reputation: 864

How to convert image into base64?

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

Upvotes: 0

Views: 210

Answers (2)

jo_va
jo_va

Reputation: 13983

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

Upvotes: 1

abadalyan
abadalyan

Reputation: 1235

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

Upvotes: 1

Related Questions