Using extract image of pixi

[cezararndt]

Can someone help with that please, i'm trying to export my pixi layer using: this.pixiLayer.utils.getRenderer().extract.image();; it always result in a blank image.

For test purpose, I called this extract method image inside the "L.PixiOverlay.js" I added at _redraw method, there I got the image but mirrored.

Is there another way to export a pixi layer as an image, i tried look for some plugin but i couldn't find

[manubb]

Apparently, this is not the correct usage. See https://pixijs.download/v4.7.3/docs/PIXI.extract.html https://pixijs.download/v4.7.3/docs/PIXI.extract.WebGLExtract.html https://pixijs.download/v4.7.3/docs/PIXI.extract.CanvasExtract.html Can you try something like:

const img = utils.getRenderer().plugins.extract.image(utils.getContainer());

?

[cezararndt]

Hi manubb, thanks for your reply.

I'll try one of this examples that you posted although i have some codes without involving leaflet and it works with the code that i put in my example, in the documentation of pixi all this methods to extract you can pass or not the parameter, here theirs description about that:

A displayObject or renderTexture to convert. If left empty will use use the main renderer

Actually i tried a few times passing the target and not passing it, both returned the same result that i said before, a blank image.

As a test i put the extract method inside the PixiOverlayer and i had a different result, i got the image but it was "mirrored".

I haven't tried these last two (WebGLExtract and CanvasExtract), i'm going to try and come back here to update.

Thank you again for now

[cezararndt]

Hello again, just updating.

I tried as you said passing the paramter utils.getContainer() and it didn't work.

Those links on the documentation about WebGLExtract and CanvasExtract, i was reading and on description and it has this part:

An instance of this class is automatically created by default, and can be found at renderer.plugins.extract

So, what i could understand is that not possible to instantiate these classes, it depends if the pixi was created using webgl or canvas, actually i tried instantiate passing utils.getContainer() as parameter and i always got an error.

I got the example (French cities) on the repository page and made a jsfiddle for it: https://jsfiddle.net/y6Lujbp9/13/

In this example i added a code at the end of the renderer (line 227), these line you will be able to see the mirrored image that i commented.

[manubb]

I just published v1.6.0 where i added support for preserveDrawingBuffer option that is required in pixi when you use renderer.plugins.extract.image. However, there is a bug in pixi that causes the mirror problem. I suggest that you open an issue on pixi repo for this.

Another possibility is to use:

renderer.view.toDataURL()

You can have a look in: https://jsfiddle.net/y6Lujbp9/16/

Note that the length of an href is limited and you should probably use a blob and URL.createObjectURL (see this stackoverflow question).

[cezararndt]

Hi manubb, thank you for your support on that, I ended up using .view.toDataURL().

About the question on stackoverflow, i'm going to make this changes, thank you again.