ReactJS Resize Base64

Question

It works if you use the url https://i.imgur.com/6gMn1RD.png. However, when passing the string via axios, i have a network problem with the string being to large. To manage this... I want to resize the image to 100px/100px. I have been at this for 2 days and cannot find a solution anywhere.

So the steps should be as follows:

• Get base64 string from url (see snippet below).
• In the snippet below, before calling this.setState, convert the base64 to a smaller size of 100px/100px
• Finally, we can call set state with the resized base64 string.

I have the following code snippet

  convertAndSetAvatarUrlToBase64 = () => {
    const url = this.state.avatarUrl;

    const setAvatar = (base64) => {
    // Resize base64 here
      this.setState({ avatar: base64, fileAvatarImage: '' });
    }

    let getDataUri = function (url, callback) {
      let xhr = new XMLHttpRequest();
      xhr.onload = function () {
        let reader = new FileReader();
        reader.onloadend = function () {
          callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      let proxyUrl = 'https://cors-anywhere.herokuapp.com/';
      xhr.open('GET', proxyUrl + url);
      xhr.responseType = 'blob';
      xhr.send();
    };

    getDataUri(url, function (base64) {
      setAvatar(base64);
    })
  }

Note: I've tried using the library resize-base64, but all I get is a DrawImage error relating to the canvas (something my friend said doesn't work well with react).