Cocos Creator教程:截图&切图

截图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

作者：Leo501
链接：https://www.jianshu.com/p/e06a35c67f8b
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。