Download the texture as image from texture Canvas

Questions
1

Hello, I am trying to download the image of the texturecanvas texture.
is there a way to do it ?

this is a pg when you press on the mesh it will console the ctx but is there any function to get the texture (“no name”) in inspector at the textures section

2

Good morning @Mostafa_Salloum

I took a look at your PG and this is what I got:

Usually, you should be able to use the texture inspector by clicking on the texture in the asset list like so.

image
image1004×856 115 KB

However, when I clicked on the no-name textures the inspector closed. Is this because they are null? Is this a bug? Since you mentioned downloading I tried downloading the entire project using this button.

image
image728×466 15.4 KB

This usually has a textures folder inside it, but in this case, it was empty.

1 Like
3

Yes 100% the no name is there and i can inspect it and even download it when in the edit section of textures make sure you are using version 4.2 not 5.0 to see it
So the texture is there but its value is null and url is null and buffer is null its so i cant convert it from texture to an image
I am asking of there are a way to make an image and add to it this texture (texturecanvas) and download it
Thank you

4

Ah yes, I was running 5.0, I see it working now in 4.2

Ok! To clarify if I think I understand correctly we want to add in another image the already populated texture and then download it? The downloading should still be able to be done with the texture inspector.

Looking inside the code from there I found the following saveTexture function:
Can take a look at our source code directly textureCanvasManager.ts

    public saveTexture() {
        const canvas = this._editing3D ? this._3DCanvas : this._2DCanvas;
        Tools.ToBlob(canvas, (blob) => {
            Tools.Download(blob!, this._originalTexture.name);
        });
    }

As far as adding an image onto the texture you should be able to create a dynamic texture with a given image like in this demo https://playground.babylonjs.com/#5ZCGRM#4 and then add it to your canvasTexture.

Also going to put doc links for reference to anyone else:

5

Thank you msDestiny for your answer, is there are an example or pg how i can use savetexture function?
like i said i want to download the texture from the code without opening the inspector.
and yes you got it i want to add an image or text to a texture that is already in the scene on a mesh
so i am using texture canvas so is there a way download the texture canvas as image after i finish the adding proccess on the texture

6

Hey @Mostafa_Salloum

Here we go: https://playground.babylonjs.com/#436DIW#34

In this example, I have it so when we click on the mesh the no named texture will print. I ended up using the code from the save texture function I posted above. The texture had to be converted to a canvas element using the following code (line 60-70)

var te = scene.textures.filter(text => text.name == "")[0];
console.log(te);

var data = await te.readPixels(0, 0);
var size = te.getSize();
var canvas2 = document.createElement("canvas");
var context = canvas2.getContext('2d');
var imgData = context.createImageData(size.width, size.height);
imgData.data.set(data);
context.putImageData(imgData, 0, 0);
document.body.appendChild(canvas2);

One thing that I’m slightly off-putted by is the size of the printed image. Feel free to play with it if you want to adjust. But now we have the printing step. :slight_smile:

7

Thank you very much for your work i really appreciate what you did
and yeah the size of the outputted image is very small just a question is there is a way where i can adjust the size the resolution ?

8

nevermind i just changed
context.canvas.height=512
context.canvas.width=512

and now its downloading as full image
Thanks

1 Like