Converting node to sprite

Converting node to sprite
0.0 0


I need to build an image from a node containing a background image and a high score textfield and then post it to a server.

I have to build this outside the visible area so I can’t use

let canvasEl: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('GameCanvas');
let context = canvasEl.getContext('webgl', { preserveDrawingBuffer: true, alpha: false, premultipliedAlpha: false });
let screenshotImg = context.canvas.toDataURL();

… as the node would have to be temporarily visible.

Is it possible to get the contents of a node pixel by pixel?



Try this

 var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
 var data =;


Thanks, but I have to get the data from a node directly, not the canvas element.


If you want to create another sprite by clipping some part of previous sprite then this is the code

var spr = new cc.Sprite("res/landscape.png");

var rt = new cc.RenderTexture(200,200);

var tex = rt.getSprite().getTexture();

var spr2= new cc.Sprite(tex);

If you want to get imagedata then it could be done using webgl
Here is the sample code related to you. Take out code you needed.

var WINDOW_WIDTH = cc.director.getWinSize().width;

var WINDOW_HEIGHT = cc.director.getWinSize().height;

rt = new cc.RenderTexture(WINDOW_WIDTH, WINDOW_HEIGHT, 
rt.setPosition(WINDOW_WIDTH / 2, WINDOW_HEIGHT / 2);
this.addChild(rt, 5);

var getPercentageTransparent =  function () {
    var s = rt.getSprite().getContentSize();
    var tx = s.width;
    var ty = s.height;

    var bitsPerPixel = 4 * 8;
    var bytesPerPixel = bitsPerPixel / 8;
    var bytesPerRow = bytesPerPixel * tx;
    var myDataLength = bytesPerRow * ty;

    var numberOfPixels = tx * ty;
    var numberOfTransparent = 0;

    var rawImagePixels = new Uint8Array(myDataLength);
    gl.readPixels(0, 0, tx, ty, gl.RGBA, gl.UNSIGNED_BYTE, rawImagePixels);

    var x, y;

    for (y = 0; y < ty; y++) {
        // just want the last byte (alpha) for each pixel
        for (x = 0; x < tx; x++) {
            var alpha = rawImagePixels[(y * 4 * tx + ((x * 4) + 3))];

            if (alpha < 1) {
    cc.log("Number of pixels" + numberOfPixels);
    cc.log("Number of Trasparent" + numberOfTransparent);
    cc.log("percentage " + (numberOfTransparent / numberOfPixels) * 100);
    return (numberOfTransparent / numberOfPixels) * 100;


Thanks for the in-depth example. I haven’t had time to try it out yet, but it does look like something I could use!

I’ll give it a shot ASAP and let you know.

Thanks again!


Hey again. Sorry it took so long to get back to you but I didn’t have time until now to experiment with your code.

Your first example doesn’t work since it’s complaining that spr.visit() is not a function.

Second example seem to just take a screenshot of the whole game.

What I need is to convert a node to a bitmap. Only it’s contents and not what’s behind it or in front of it.

In Flash I would do it like so (MovieClip is a node so to speak):

var bitmapData:BitmapData = new BitmapData(myMovieClip.width, myMovieClip.height);

var bitmap:Bitmap = new Bitmap(bitmapData);

Thanks anyway for your help.

If anyone else knows of a solution please let me know. Thanks!