Taking A Screenshot on Cocos2d-x JavaScript

[Zinitter]

@SonarSystems

You can try use

this.sprite2.setFlippedY(true);

[SonarSystems]

That works but what if I want to share the image lets say via facebook then the issue will still persist.

[Zinitter]

If save to file through JSB, the image is ok without flip.

Or you can try flip “this” before visit and set it back after that.

[Gurudath]

Hello,

Is this above code works in android native build.
When i was trying in android black screen was saving.

Take screenshot with Cocos2d-js on android platform

I’m working with cocos2d-js alpha1 version. I’ve succeed to take screenshot on iOS platform using RenderTexture. But after I copy the codes to android platform, the result image is just turn to black. My question is how to take screenshot on android platform? I referred this: http://www.cocos2d-x.org/wiki/How_to_Save_a_Screenshot Any idea?

Thanks
Gurudath

[Zinitter]

@Gurudath

Are you taking full screenshot or sprite?

This is the code i use to screenshot for a sprite and save it to a file in Cocos2d-JS v3.6.1 and v3.7.
Work fine in iOS, Android and Mac.

For full screen, you just need to replace the sprite with current scene or layer node.

var imageSprite = new cc.Sprite(texture);
var renderer = new cc.RenderTexture(imageSprite.getContentSize().width,      
imageSprite.getContentSize().height, cc.Texture2D.PIXEL_FORMAT_RGBA8888);
renderer.setAutoDraw(true);
renderer.x = 0;
renderer.y = 0;

imageSprite.x = (imageSprite.getContentSize().width/2);
imageSprite.y = (imageSprite.getContentSize().height/2);

renderer.setSprite(imageSprite);
renderer.beginWithClear(255, 255, 255, 0, 0 , 0);
renderer.sprite.visit();
renderer.end();

var saveSuccess = renderer.saveToFile("imageName.png", cc.IMAGE_FORMAT_PNG);

[energyy]

BTW is there option like:

User finished level and got option to share his victory screen with share buttons on it. When pressing share button, app makes screenshot but without this share button itself and adding instead of share button for example application name label.

How to make such screenshot with changing/replacing graphical object in current scene without changing actual view to the user?

[Zinitter]

@energyy

One way i can think to do that is to add all node you want for screenshot to a cc.Node without that share button.

Then you can use that node on the renderer, just replace renderer.sprite.visit(); to cc.Node.visit();

[Pantoo]

Hello,
I added your code into a event function of a button, I test on iPhone 6 simulator and when i pressed the button, the varible saveSuccess was true, but no screenshot was saved in Photo of the iPhone simulator. Please tell me why?

Thank u so much for your support!

[Zinitter]

@Pantoo

var storagePath = ((jsb.fileUtils ? jsb.fileUtils.getWritablePath() : "/")); 

Can you try cc.log the storagePath and go to the path to check the photo?

renderer.saveToFile photo saved path should be at storagePath as default but not in Photo.

[Gurudath]

@Zinitter

Am trying to save screenshot of full screen.

Thanks for the solution.

[Pantoo]

@Zinitter
thanks for your support so much.
I tried your solution and the screenshot was actually saved to the storagePath.
But can you tell me how to save the screenshoot to Photo in ios Similator or a specific path in Mac OS.
thanks you again!

[Zinitter]

@Pantoo

I didn’t try to save the file on other path before.

May be you can try provide a full path string when save to file to see it would save to that path or not.

renderer.saveToFile(fullPath, cc.IMAGE_FORMAT_PNG);

If that don’t work, then you may have to implement or modify the function yourself.

For iOS, saving image to Photo Album

UIImageWriteToSavedPhotosAlbum(imageToBeSaved, nil, nil, nil);

I’m not familiar with Mac.

For easy way, try modify the saveToFile function in below file should do the trick.
/cocos/platform/CCImage.cpp

bool Image::saveToFile(const std::string& filename, bool isToRGB)

[Pantoo]

thank u so much

[energyy]

btw is it possible to make screenshot of sprite/node on web?

[Zinitter]

@energyy

I just tested it, the code is working on web except renderer.saveToFile which only available on JSB.

However, you can get the sprite from the cc.RenderTexture but it is upside down, so need flip it.

Here is the example code

	var renderer = new cc.RenderTexture((winSize.width), (winSize.height), cc.Texture2D.PIXEL_FORMAT_RGBA8888);
	renderer.setAutoDraw(true);
	renderer.x = 0;
	renderer.y = 0;

	renderer.beginWithClear(255, 255, 255, 0, 0 , 0);
	this.visit();
	renderer.end();
	
	var testSprite = new cc.Sprite(renderer.getSprite().texture);
	testSprite.setPosition((cc.winSize.width*0.50), (cc.winSize.height*0.50));
	testSprite.setFlippedY(true);
	this.addChild(testSprite);

[energyy]

Argh I need now your help again

Is there possibility to share that renderedTexture thru facebook?

There is no possibility to save it in file directly, but maybe there is some workaround.

[Zinitter]

@energyy

I didn’t try with Facebook yet so not familiar how to do that.

What i can think is try to convert the cc.Sprite to base64 image data, then you may upload it or share it.

Between, you want to do it on native app or website?

[energyy]

For now website.

Maybe you can give solution for cc.Sprite to base64? and then probably i can use php script to generate screenshot.

[Zinitter]

@energyy

Not sure this help or not, haven’t try yet.
http://html2canvas.hertzen.com/

Basic idea is

1. Convert cc.Sprite to DOM element.
2. Pass the sprite element to html2canvas(element, options);
3. Get base64 from canvas var base64 = canvas.toDataURL("image/jpeg", 1.00);

[Gurudath]

Hello,

Did anyone try the above method. Is that working.
Am trying to take screenshot of current running scene in Safari browser(Ipad Device).