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