Jump to content

Renderer (canvas) to image?


Recommended Posts



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?

Link to comment
Share on other sites

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);        }
Link to comment
Share on other sites


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.

Link to comment
Share on other sites

  • 1 year later...


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!

Link to comment
Share on other sites

  • 1 month later...

@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();


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...