How to get the screen buffer as an image

[dragonshade]

   Hi,  I am currently working on a project where I have a huge container, but I only want to capture what is in the screen buffer on the canvas.  I tried using getImageData, it didn't work since it is for 2d context not webgl. RenderTexture seems to scale the whole container down to the renderTexture size. Is there a way to get the screenbuffer on a 2d canvas so I can use as a texture ?  Thanks

[ivan.popelyshev]

var renderTexture = PIXI.RenderTexture.create(renderer.width, renderer.height);
renderer.render(stage, renderTexture);
var canvas = renderer.extract.canvas(renderTexture);
window.open(canvas.toDataURL('image/png'));

[dragonshade]

I changed your code to fit my version of PIXI.  It doesn't work for me. I get a blank image of the size of the huge container. It is blank maybe because the texture dimension is way too big. I need to get only what is shown on the screen like a screenshot. 

 var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
    renderTexture.render(container);
    document.body.appendChild(renderTexture.getImage());

 

[ivan.popelyshev]

It works.

Paste this to http://pixijs.github.io/examples/index.html?s=basics&f=tiling-sprite.js&title=Tiling+Sprite&v=v3.0.11 :

 

var renderer = PIXI.autoDetectRenderer(800, 600);
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a texture from an image path
var texture = PIXI.Texture.fromImage('_assets/p2.jpeg');

/* create a tiling sprite ...
 * requires a texture, a width and a height
 * in WebGL the image size should preferably be a power of two
 */
var tilingSprite = new PIXI.extras.TilingSprite(texture, renderer.width, renderer.height);
stage.addChild(tilingSprite);

var count = 0;

animate();

setTimeout(function() {
  var renderTexture = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
  renderTexture.render(stage);
  var canvas = renderTexture.getCanvas();
  window.open(canvas.toDataURL('image/png'));
}, 1000);

function animate() {

    count += 0.005;

    tilingSprite.tileScale.x = 2 + Math.sin(count);
    tilingSprite.tileScale.y = 2 + Math.cos(count);

    tilingSprite.tilePosition.x += 1;
    tilingSprite.tilePosition.y += 1;

    // render the root container
    renderer.render(stage);

    requestAnimationFrame(animate);
}

 

[dragonshade]

wow, It works now. Thank you. 

[ivan.popelyshev]

27 minutes ago, dragonshade said:

wow, It works now. Thank you. 

Fave the post, tip the authors: https://www.patreon.com/user?u=2384552

[dragonshade]

39 minutes ago, ivan.popelyshev said:

Fave the post, tip the authors: https://www.patreon.com/user?u=2384552

It wasn't working because renderTexture doesn't seem to handle nested container. When I tried it on a flat container, it works. 

[ivan.popelyshev]

Oh, did you want to render only nested one? Then you could just ask to skipUpdateTransform, please look into RenderTexture.render signature, i believe it was there somewhere

[dragonshade]

wow,  disabling skipUpdateTransform does it for me.  Thanks !