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?
Thanks
Try this
var imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight);
var data = imageData.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);
rt.begin();
spr.visit();
rt.end();
var tex = rt.getSprite().getTexture();
var spr2= new cc.Sprite(tex);
spr2.setPosition(cc.p(100,100));
this.addChild(spr2);
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,
sprite.getTexture().getPixelFormat());
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);
rt.begin();
gl.readPixels(0, 0, tx, ty, gl.RGBA, gl.UNSIGNED_BYTE, rawImagePixels);
rt.end();
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) {
numberOfTransparent++;
}
}
}
cc.log("Number of pixels" + numberOfPixels);
cc.log("Number of Trasparent" + numberOfTransparent);
cc.log("percentage " + (numberOfTransparent / numberOfPixels) * 100);
return (numberOfTransparent / numberOfPixels) * 100;
},
2 Likes
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);
bitmapData.draw(myMovieClip);
var bitmap:Bitmap = new Bitmap(bitmapData);
this.addChild(bitmap);
Thanks anyway for your help.
If anyone else knows of a solution please let me know. Thanks!