Cocos Creator 教程:截图&切图

游戏中常用到截图功能，比如微信分享。下面讲解下如何通过Cocos Creator进行截图，还有要注意的地方，文章最后我会放出Demo，给大家参考。

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