Cocos Creator教程:截图&切图
2018-03-30 本文已影响193人
33b882c6c780
游戏中常用到截图功能，比如微信分享。下面讲解下如何通过Cocos Creator进行截图，还有要注意的地方，文章最后我会放出Demo，给大家参考。
pic
截图1
本方式是常用到，要求截图时不能包含mask节点。优点是比下面方式2省内存。
var size = cc.director.getWinSize();
var fileName = "result_share.jpg";
var fullPath = jsb.fileUtils.getWritablePath() + fileName;
if(jsb.fileUtils.isFileExist(fullPath)){
jsb.fileUtils.removeFile(fullPath);
}
//如果要图片高质量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888。
var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height));
texture.setPosition(cc.p(size.width/2, size.height/2));
texture.begin();
cc.director.getRunningScene().visit();
texture.end();
//1.4 以后，截屏函数的第二个参数改成了 cc.ImageFormat.PNG
texture.saveToFile(fileName, cc.IMAGE_FORMAT_JPG);
截图2
当截图包含mask节点时，方式1截图会出bug。只能使用本方式。缺点是比较消耗内存一些。
var size = cc.director.getWinSize();
var fileName = "result_share.jpg";
var currentDate = new Date();
var fullPath = jsb.fileUtils.getWritablePath() + fileName;
if (jsb.fileUtils.isFileExist(fullPath)) {
jsb.fileUtils.removeFile(fullPath);
}
//如果要图片高质量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888。
var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height), cc.Texture2D.PIXEL_FORMAT_RGBA4444, gl.DEPTH24_STENCIL8_OES);
texture.setPosition(cc.p(size.width / 2, size.height / 2));
texture.begin();
cc.director.getRunningScene().visit();
texture.end();
//1.4 以后，截屏函数的第二个参数改成了 cc.ImageFormat.PNG
texture.saveToFile(fileName, cc.IMAGE_FORMAT_JPG);
以上两种方式要注意的是：
- EditBox，VideoPlayer，Webview 等控件无法被包含在截图里面，因为这是 OpenGL 的渲染到纹理的功能，上面提到的控件不是由引擎绘制的。
- 只适用于原生平台
Web截图
- WebGL与Canvas环境都可用
captureScreenshot() {
function callback() {
var canvas = document.getElementById("GameCanvas");
var base64 = canvas.toDataURL("imagea/png");
cc.director.off(cc.Director.EVENT_AFTER_DRAW);
var frame = this.base64ToSpriteFrame(base64, (frame) => {
this.sprite.spriteFrame = frame;
});
}
cc.director.on(cc.Director.EVENT_AFTER_DRAW, callback.bind(this));
},
base64ToSpriteFrame(base64, callback) {
var img = new Image();
img.src = base64;
img.onload = function () {
var texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
var newframe = new cc.SpriteFrame(texture);
if (callback) callback(newframe);
}
},
- Canvas环境，在WebGl环境无效。
captureScreenshot() {
var canvas = document.getElementById("GameCanvas");
var base64 = canvas.toDataURL("imagea/png");
var frame= this.base64ToSpriteFrame(base64,(frame)=>{
this.sprite.spriteFrame=frame;
});
//把图片生成后download到本地
// var href = base64.replace(/^data:image[^;]*/, "data:image/octet-stream");
// document.location.href = href;
},
base64ToSpriteFrame(base64,callback) {
var img = new Image();
img.src = base64;
img.onload = function(){
var texture = new cc.Texture2D();
texture.initWithElement(img);
texture.handleLoadedTexture();
var newframe = new cc.SpriteFrame(texture);
if(callback)callback(newframe);
}
},
切图
由于目前Creator截图只能截全屏，截部分节点区域会出现bug。如果想显示部分区域的话，通过设定截取的rect，可以任意切割。
/**
* 切图
* @param { cc.SpriteFrame or cc.Texture2D} data
* @param {*} rect
*/
cutPicture(data,rect){
let frame;
if(data instanceof cc.SpriteFrame) {
frame=data;
}else if(data instanceof cc.Texture2D) {
frame = new cc.SpriteFrame(texture);
}
if(!frame) {
return null;
}
//设置显示区域 ，注意使用cc.Rect()会得到undefinde
frame.setRect(rect);
return frame;
},
最后
以上是我使用Creator截图的总结，希望能帮助到你。后面我会上传demo。
如果喜欢就动动手指点喜欢，关注我吧。我会不定时更新Cocos Creator教程与上传demo到github。
参考文章
http://forum.cocos.com/t/creator/40750/6
http://forum.cocos.com/t/base64/36960
http://forum.cocos.com/t/creator/38461
http://discuss.cocos2d-x.org/t/screenshot-in-webgl-in-creator/39452/2
http://www.cnblogs.com/hongru/archive/2012/01/14/2322540.html
