getPixel data from Texture

[charlie_says]

Hi,

I've had a look through several forum posts, which I'm not sure provide a definitive answer - some are quite old.

Is the best/easiest/only way to get pixel data from a coordinate, to extract the texture to a canvas object, and then use the built in helpers to get the data?

Thanks

[charlie_says]

Apologies, 2 more minutes of experimenting got me an answer!

let tmp = PIXI.Sprite.from(PIXI.utils.TextureCache['pic']);

let array = this.app.renderer.extract.pixels(tmp);

console.log(array);

I didn't seem to be able to do it directly from the texture - does anyone know if that's possible?

[ivan.popelyshev]

yes, if you know canvas2d api. "baseTexture.resource.source" is an image. you can render it to canvas 2d and get the info. Two examples are here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel-perfect-interaction

 

[charlie_says]

Thanks @ivan.popelyshev I'm familiar with canvas 2d, and have got both versions working...

I think I prefer the above as it's less lines...

for anyone who's interested:

		let texture = PIXI.utils.TextureCache['pic'];
		let img = texture.baseTexture.resource.source;

		let canvas = document.createElement("CANVAS");
		let ctx = canvas.getContext('2d');

		ctx.drawImage(img, 0, 0);

		let pixel = ctx.getImageData(0, 0, 1, 1);
		let data = pixel.data;

		console.log(data);