由于官方还没有正式提供截图的组件,而不少小伙伴对于这个功能需求很大,
所以我抽空弄了一个小 demo 供大家参考:
项目运行结果:
截图的核心代码:
captureScreen: function () {
//注意,EditBox,VideoPlayer,Webview 等控件无法被包含在截图里面
//因为这是 OpenGL 的渲染到纹理的功能,上面提到的控件不是由引擎绘制的
if(CC_JSB) {
//如果待截图的场景中含有 mask,请使用下面注释的语句来创建 renderTexture
// var renderTexture = cc.RenderTexture.create(1280,640, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
var renderTexture = cc.RenderTexture.create(1280,640);
//实际截屏的代码
renderTexture.begin();
//this.richText.node 是我们要截图的节点,如果要截整个屏幕,可以把 this.richText 换成 Canvas 切点即可
this.richText.node._sgNode.visit();
renderTexture.end();
renderTexture.saveToFile("demo.png",cc.ImageFormat.PNG, true, function () {
cc.log("capture screen successfully!");
});
//打印截图路径
cc.log(jsb.fileUtils.getWritablePath());
}
}
测试项目:
ScreenCaptureDemo.zip (478.4 KB)
测试方法:
-
直接点击截图按键,截图成功后控制台会输出: capture screen successfully!
-
查看截图内容: 可以从控制台可以看到截图保存的路径。
比如,我用的 1.2 的 creator 测试,输出的 log 为:
Simulator: /Applications/CocosCreator.app/Contents/Resources/cocos2d-x/simulator/mac/Simulator.app/Contents/Resources/
然后大家到对应的目录查看截图即可,使用 iOS 和 Android 也可以输出截图路径。
如果是 Android 用户,需要 root 手机后,可以通过 adb shell 的方式连接手机,然后输入 su 取得超级权限,
再通过 cd /data/data/org.cocos2d.ScreenCaptureDemo/files/
目录下面,使用 cp demo.png /sdcard
最后输入两次 exit
退出 adb shell,然后在控制台执行 adb pull /sdcard/demo.png
就可以把 demo.png 下载到当前 shell 执行所在的目录了。
#注意
如果要测试截 ScrollView,可以把项目中的 ScrollView 的结点激活,然后修改测试代码为:
var renderTexture = cc.RenderTexture.create(1280,640, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
// var renderTexture = cc.RenderTexture.create(1280,640);