How to get texture image data?

[iamchairs]

I am using Pixi webgl to do some edge detection. Not only would I look to incorporate multiple edge detection methods to get a better results, but I will eventually need to grab the resulting image to analyze the eges.

I've created a sprite from the following image-

 

 

And through some custom filters (shaders) I get something like this-

 

 

How to I get the resulting image data after all filters are ran? I'm hoping this doesn't require me to use the 2d context.

  var img = PIXI.Sprite.fromImage('uploads/' + imgFile);
  
  console.log(img);

  img.x = width / 2;
  img.y = height / 2;
  img.anchor.set(0.5);

  img.filters = [
    grayScaleFilter,
    new PIXI.filters.BlurFilter(0.1, 1, 1),
    edgeDetectFilter,
    //sobelXFilter,
    //sobelYFilter,
    //prewittXFilter,
    //prewittYFilter,
    highlightFilter
  ];

  stage.addChild(img);

 

Edited December 31, 2016 by iamchairs

[xerver]

Use the extract API:

http://pixijs.download/release/docs/PIXI.WebGLExtract.html

// pixels is a Uint8ClampedArray of [R, G, B, A, ...] data.
const pixels = renderer.extract.pixels(stage);