admin管理员组

文章数量:1418021

I want to convert images from a URL to base 64, and store that in a state for later use.

How do I return the data from fetch()?

I can get it to work using CORS safe images and an HTML canvas, but this will not work for public domains.

  openImage = (index) => {
    const url = formatURLs[index];
    const base64 = this.getBase64Image(url);

    this.setState(prevState => ({
      currentImage: index,
      currentImagebase64: base64
    }));
  }

  getBase64Image(url) {
    fetch(url).then(r => r.blob()).then(blob => {
      var reader = new FileReader();
      reader.onload = function() {
           var b64 = reader.result.replace(/^data:.+;base64,/, '');
           return b64;
      };
      reader.readAsDataURL(blob);
    });
  }

When I console.log(reader.result), it will output base64 as expected.

However when I return b64, it returns to openImage as 'undefined'.

I want to convert images from a URL to base 64, and store that in a state for later use.

How do I return the data from fetch()?

I can get it to work using CORS safe images and an HTML canvas, but this will not work for public domains.

  openImage = (index) => {
    const url = formatURLs[index];
    const base64 = this.getBase64Image(url);

    this.setState(prevState => ({
      currentImage: index,
      currentImagebase64: base64
    }));
  }

  getBase64Image(url) {
    fetch(url).then(r => r.blob()).then(blob => {
      var reader = new FileReader();
      reader.onload = function() {
           var b64 = reader.result.replace(/^data:.+;base64,/, '');
           return b64;
      };
      reader.readAsDataURL(blob);
    });
  }

When I console.log(reader.result), it will output base64 as expected.

However when I return b64, it returns to openImage as 'undefined'.

  • javascript
  • reactjs
Share Improve this question asked Aug 4, 2019 at 13:17 Ryan BirchamRyan Bircham 671 silver badge7 bronze badges 4
  • 1 Why not just store the Blob? – Bergi Commented Aug 4, 2019 at 13:21
  • fetch() is asynchronous so you can't return a value from a function like yours. You can return a Promise and update the state from within a .then() callback. – Pointy Commented Aug 4, 2019 at 13:21
  • You need to make a promise for the b64 data in the load event handler. Then you can return those so that getBase64Image returns a promise. Change openImage to wait for the result of the promise. – Bergi Commented Aug 4, 2019 at 13:24
  • Don't make a base64 version of it. As said by @Bergi, you'd be better to store the Blob. If it needs to be persistent, then use IndexedDb to store the Blob. When you need to display the image use a blobURI (URL.createObjectURL). You would only need a dataURI if you were generating a standalone document which would need to embed that file, and it seems you're not in this quite rare case. – Kaiido Commented Aug 4, 2019 at 14:07
Add a ment  | 

2 Answers 2

Reset to default 3

getBase64Image is async so when calling it in a sync way it will return undefined.

You can try something like that

  openImage = async (index) => {
    const url = formatURLs[index];
    const base64 = await this.getBase64Image(url);
    this.setState(prevState => ({
      currentImage: index,
      currentImagebase64: base64
    }));
  }

  async getBase64Image(url) => {
    const response = await fetch(url);
    const blob = await response.blob();
    const reader = new FileReader();
    await new Promise((resolve, reject) => {
      reader.onload = resolve;
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
    return reader.result.replace(/^data:.+;base64,/, '')
  }

You have to set state inside .then()

getBase64Image(url) {
    fetch(url).then(r => r.blob()).then(blob => {
      var reader = new FileReader();
      reader.onload = function() {
           var b64 = reader.result.replace(/^data:.+;base64,/, '');
           this.setState({
             currentImagebase64: b64
           });
      };
      reader.readAsDataURL(blob);
    });
  }

本文标签： javascriptHow to return base64 data from a fetch promiseStack Overflow

版权声明：本文标题：javascript - How to return base64 data from a fetch promise? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745283022a2651536.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。