Renderer (canvas) to image?

[Blintux]

Hello!

 

I have a simple question:

How to save the renderer as an image?

 

I tried canvas.toDataURL() method:

 

canvas = $('#gamearea canvas').get(0);image = canvas.toDataURL("image/png", 1);

But the result is a black rectangle and this size same as canvas size not the full renderer size.

Can somebody please help me out?

[clark]

EDIT > Man it is too late at night. I thought I was on the Phaser forum....  Although, this concept is still applicable so I will not delete the code incase it helps because Phaser.BitmapData IS a HTMLCanvasElement.

Here is a recent function I used, I was passing in a specific Phaser.Group but I see no reason why it would not work with the this.game.stage property. 

         /**         * Capture the users image as a URI data string.          * @param container - the thing we want to capture. In this case, we wanted to save the users design.         * @returns - The URI base64 string representing the snapshot image         */        getCaptureAsDataURI(container: Pixi.DisplayObject): string {            //create a new bitmap data the size of the game            var bmd: Phaser.BitmapData = this.game.make.bitmapData(this.game.width, this.game.height);            var context: CanvasRenderingContext2D = bmd.context;            //fill the canvas with the background color            context.fillStyle = this.backgroundColor;            context.fillRect(0, 0, bmd.width, bmd.height);            //draw the container            bmd.draw(container);            //return the bitmap data as a uri            return bmd.canvas.toDataURL('image/jpeg', 0.8);        }

[alex_h]

you should be assigning the value of canvas.toDataURL to the image.src property

image.src = canvas.toDataURL("image/png", 1);

[Blintux]

 

you should be assigning the value of canvas.toDataURL to the image.src property

image.src = canvas.toDataURL("image/png", 1);

 

Yep, but I want to save (copy to another canvas which is minimap) the full renderer size, not just canvas.

 

Another solution the RenderTexture. I try this method:

 

texture = new PIXI.RenderTexture( 800, 600);rend = texture.render(stage, null, true);sprite = new PIXI.Sprite( texture );minimap.addChild( sprite ); 

The result in the minimap canvas is a black rectangle and the main stage horizontally reflected.

[FlashyGoblin]

Is there a way to capture just a particular region of the canvas to save as an image?

[ivan.popelyshev]

@FlashyGoblin

Below is solution for pixi-v4.

You can hack "renderer.extract" component and use the same approach there: https://github.com/pixijs/pixi.js/blob/dev/src/extract/webgl/WebGLExtract.js

Just add a new method there:

renderer.extract.region = function(x1, y1, x2, y2) {
   var renderer = this.renderer;
   var gl = renderer.gl;
   //...
}

Either use readPixels, either use, either gl.copySubTexImage2D. There's good example in pixi-picture: https://github.com/pixijs/pixi-picture/blob/master/src/PictureRenderer.js#L137

You can use some parts of that code to complete your function. Feel free to make a PR to PIXI with results  Have fun!

[dotJayEss]

@FlashyGoblin I tried solving this for my own use case based on @ivan.popelyshev's suggestions, but I am a still a noob when it comes to webgl solutions. I ended up with a solution which is working for me. However, based on Ivan's direction above and the general intent of those modules, I don't feel it is PR worthy. Hope this helps. 

//Returns a region of the canvas as a base64 dataURL
function extractRegion(renderer, x, y, width, height){
    var sourceCanvas = renderer.extract.canvas();
    var sourceContext = sourceCanvas.getContext('2d');
    var extractCanvas = document.createElement('canvas');
    var extractContext = extractCanvas.getContext('2d');
    var imageData = sourceContext.getImageData(x, y, width, height);
    
    extractCanvas.width = width;
    extractCanvas.height = height;
    extractContext.putImageData(imageData, 0, 0);
    return extractCanvas.toDataURL();
}