# Getting issue to generate texture using local file(base64)

**URL:** <https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539>\
**Category:** Questions\
**Tags:** babylon\
**Created:** [February 10, 2022, 1:37pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539 "2022-02-10T13:37:24Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 10, 2022, 1:37pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/1 "2022-02-10T13:37:24Z")

</div>

We are trying to convert the HDR local file(File Object / base64) into a png file.

Using URL of HDR image, We have achieved that but facing the issue to get texture using base64 of the local file and not converting into PNG.

Tried the following syntax:

```
   1] let texture = new Texture(`data:${fileName}`, scene, false, false, Texture.BILINEAR_SAMPLINGMODE, null, null, this.base64FileString, false);
   2] let texture = new Texture(this.base64FileString, scene);
```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 10, 2022, 1:47pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/2 "2022-02-10T13:47:09Z")

</div>

loading data URLs is fully supported. Is `this.base64FileString` containing “data:” and the mime type?

---

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 10, 2022, 2:09pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/3 "2022-02-10T14:09:11Z")

</div>

Yes, It is contain that

`data:application/octet-stream;base64,Iz9SQURJQU5DRQojIE1hZGUgd2l0...`

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 10, 2022, 2:11pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/4 "2022-02-10T14:11:24Z")

</div>

it should be an image. try pasting this data URL in your browser’s address line - if the browser can load it, so should babylon.js  
It should probably start with something similar to this:  
`data:image/png;base64,`

---

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 10, 2022, 2:17pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/5 "2022-02-10T14:17:09Z")

</div>

Thanks for your response,

Using URL it’s working fine. Instead that URL upload the HDR file using file uploader then convert it to base64, then try to get texture using that base64.

HDR image gives application/octet-stream type.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 10, 2022, 5:34pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/6 "2022-02-10T17:34:27Z")

</div>

if you can share a playground we might be able to understand better and help 🙂  
thanks!

---

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 11, 2022, 6:46am UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/7 "2022-02-11T06:46:31Z")

</div>

Hi RaananW,

My playground link( Please change version to 4.2.1)

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#5EQC0M%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

here set base64 of image file manually, in real time we have image uploader. Using image uploader we upload HDR image, then convert it to base64.

Now from base64 we want PNG image

Reference links where i found possibilities :  
[http://webglworkshop.com/12/Babylon.pdf](http://webglworkshop.com/12/Babylon.pdf)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 11, 2022, 11:22am UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/8 "2022-02-11T11:22:44Z")

</div>

Hi, thanks for the playground.

There was an error running it, but it was simple to resolve. Now - this playground does nothing. You are just showing what you described, but not showing it doesn’t work.

Show me how you plan to use the texture, and show me it doesn’t work. This way there is something we can work with. OItherwise - the playground works as expected…

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 11, 2022, 11:45am UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/9 "2022-02-11T11:45:51Z")

</div>

Thanks Raanan,

I want to create texture using base64. I am not able to create texture using base 64 as defined in playground. These base 64 is generate of hdr image. I think I missing some parameters combinations.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 11, 2022, 12:33pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/10 "2022-02-11T12:33:56Z")

</div>

a data URL doesn’t involve the filename, it requires the decoded base4 string. and to use an HDR tedture you would need the HDRCubeTexture (assuming this is a cube).

Here, this is a working example - [convert HDR to PNG | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#5EQC0M#8)

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [February 11, 2022, 12:40pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/11 "2022-02-11T12:40:22Z")

</div>

The pg shows a blank screen on iphone  
v5 has a blue screen  
V4.2.1 has error and white screen , texture.onLoadObservable.add is not defined

---

<div class="post-metadata">

**Author:** ![Ratansinh\_parmar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ratansinh_parmar/32/22065_2.png) [@Ratansinh\_parmar](https://forum.babylonjs.com/u/Ratansinh_parmar)\
**Post date:** [February 11, 2022, 1:02pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/12 "2022-02-11T13:02:24Z")

</div>

Hi RaananW,  
When i tried HDRCubeTexture with version 4.2.1, Its gives me following error.  
Property ‘onLoadObservable’ does not exist on type ‘HDRCubeTexture’

And apart base64, URL contain HDR image and new Texture(URL) working fine.

Let me do more clarity on the use case. I don’t want to upload HDR image on any server then use that URL.  
I just want to Upload HDR image on browser locally and convert it to PNG through texture. if conversion possible without texture using other concept, you can suggest it.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 11, 2022, 1:57pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/13 "2022-02-11T13:57:05Z")

</div>

this is using the same code as our texture inspector:

[convert HDR to PNG | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#5EQC0M#11)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 11, 2022, 1:58pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/14 "2022-02-11T13:58:36Z")

</div>

The playground is not meant to display anything, so it is actually odd that an iphone displays a black screen.

Otherwise, the decision to use the newly added observable was of the original poster 🙂 This is a new API, so it is not available on 4.2.1.

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [February 11, 2022, 2:27pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/15 "2022-02-11T14:27:00Z")

</div>

Ah, I opened the playground on my desktop which showed the auto-downloaded png. Makes sense now:)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [March 11, 2022, 12:13pm UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/16 "2022-03-11T12:13:17Z")

</div>

Hello @Ratansinh_parmar just checking in, was your question answered?

---

<div class="post-metadata">

**Author:** ![farukcelim](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/farukcelim/32/27134_2.png) [@farukcelim](https://forum.babylonjs.com/u/farukcelim)\
**Post date:** [November 2, 2022, 9:06am UTC](https://forum.babylonjs.com/t/getting-issue-to-generate-texture-using-local-file-base64/27539/17 "2022-11-02T09:06:58Z")

</div>

You need use ‘data:image/jpg;base64,’  
Thhis is run:  
new BABYLON.Texture(`data:image/jpg;base64,${value.Product.ProductImage}`, scene, false, false, BABYLON.Texture.BILINEAR\_SAMPLINGMODE, null, null, this.base64FileString, false);