# How can i convert the result of a fetch api for an image to texture

**URL:** <https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503>\
**Category:** Questions\
**Tags:** textures\
**Created:** [May 14, 2024, 1:08am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503 "2024-05-14T01:08:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![siamak](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@siamak](https://discourse.threejs.org/u/siamak)\
**Post date:** [May 14, 2024, 1:08am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/1 "2024-05-14T01:08:16Z")

</div>

Hi Friends

I am using an api to fetch a png image as follows:

export const getSRXDataBinary = async (obj) =\> {  
const response = await fetch(‘/api’, {  
method: ‘POST’,  
headers: {  
‘Content-Type’: ‘application/octet-stream’,  
},  
body: JSON.stringify(obj),  
responseType: “arraybuffer”  
}).catch((e) =\> {  
return { status: false, data: e.message };  
});  
if (response.status !== 200) {  
return { status: false, data: response.statusText };  
}  
return response.arrayBuffer();  
};

So, because of that i cant use the usual three.TexturLoader() since that requires an image url and i dont have that. I have to get the image raw data from an api in the backend.  
When i get the data back i can display it as an image using this code:

```
 const base64 = btoa(
            new Uint8Array(rawdata.reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )
    
         myimage.src = `data:image/png;base64,${base64}`

```

But I am stuck trying to create a texture for this image as well.  
How can i convert raw data to Texture so i can map that image in 3D as well.

Thanks

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [May 14, 2024, 3:01am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/2 "2024-05-14T03:01:13Z")

</div>

All the loader classes have a “parse” method that you can pass the raw arraybuffer:  
[https://threejs.org/docs/#api/en/loaders/Loader.parse](https://threejs.org/docs/#api/en/loaders/Loader.parse)

So maybe something like:  
`let myTexture = new THREE.TextureLoader().parse( yourArrayBuffer ) `  
will work.

---

<div class="post-metadata">

**Author:** ![trueshko](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trueshko/32/26031_2.png) [@trueshko](https://discourse.threejs.org/u/trueshko)\
**Post date:** [May 14, 2024, 6:15am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/3 "2024-05-14T06:15:37Z")

</div>

I think it is not advisable to convert raw data to data-url. It’s much better to use an [url to Blob](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) from your data:

```javascript
const url = URL.createObjectURL(new Blob([rawdata], { type: 'image/png' })),
  texture = new TextureLoader().load(url, ()=>URL.revokeObjectURL(url));

```

---

<div class="post-metadata">

**Author:** ![siamak](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@siamak](https://discourse.threejs.org/u/siamak)\
**Post date:** [May 14, 2024, 6:17am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/4 "2024-05-14T06:17:48Z")

</div>

Thanks @manthrax, I did trythe parse after you suggested it. But i get null texture back. I even converted my array buffer to Uint8Array but that did not work either. This is my code:

let texture = new THREE.TextureLoader().parse(rawdata );

texture is null after the parse is executed.

Let me know what might be missing here.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [May 14, 2024, 6:28am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/5 "2024-05-14T06:28:08Z")

</div>

Read what @trueshko wrote ^

---

<div class="post-metadata">

**Author:** ![siamak](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@siamak](https://discourse.threejs.org/u/siamak)\
**Post date:** [May 14, 2024, 6:31am UTC](https://discourse.threejs.org/t/how-can-i-convert-the-result-of-a-fetch-api-for-an-image-to-texture/65503/6 "2024-05-14T06:31:58Z")

</div>

Thanks @trueshko. Your suggestion did the trick.