Cocos creator（JavaScript）截屏

使用Cocos creator（JavaScript）截屏

方法

base64數據 轉 圖片

    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，進行任意切割。這裏使用截圖來實現,截取部分節點的功能.

    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;
    }

加載圖片

加載圖片的方式有很多種,這裏提供一種方法.

    loadImg(fullPath, callback) {
        //延時就因爲，texture.begin()是到是下一幀才截圖完成
        this.scheduleOnce(() => {
            cc.loader.load(fullPath, (err, tex) => {
                let spriteFrame = new cc.SpriteFrame(tex, cc.Rect(0, 0, tex.width, tex.height));
                if (callback) callback(spriteFrame);
            });
        }, 0.01);
    }

原生截圖 適用於win android ios, creator 1.x

注意: EditBox，VideoPlayer，Webview 等控件無法被包含在截圖裏面.因爲這是 OpenGL 的渲染到紋理的功能，上面提到的控件不是由引擎繪製的

    screenshotNative(fileName = 'result_share.png', isMaskExist = false, targetNode = null, callback) {
        var size = cc.director.getWinSize();
        var fullPath = jsb.fileUtils.getWritablePath() + fileName;
        cc.log('完整路徑:', fullPath);
        // 如果已存在則刪除路徑
        if (jsb.fileUtils.isFileExist(fullPath)) {
            cc.log('完整路徑 : ', fullPath);

            jsb.fileUtils.removeFile(fullPath);
        }
        // 普通方式:更加省內存. 如果包含mask組件需使用第二種方式,否則將截圖白屏
        var texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height));
        //  若截圖的場景中包含mask組件,需要使用下面方式
        if (isMaskExist === true) {
            //顏色深度 RGBA4444和RGBA8888,RGBA4444比RGBA8888的圖像質量會差一些
            //如果要圖片高質量 可以使用cc.Texture2D.PIXEL_FORMAT_RGBA8888.
            cc.log('true')
            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();
        // 如果對某一個節點截圖，使用: a.node._sgNode.visit()
        if(targetNode != null)
        {
            targetNode._sgNode.visit();
            // 將texture 添加到場景中去，否則截屏的時候，場景中的元素會移動.
            targetNode._sgNode.addChild(texture);
            // 將texture 設置爲不可見，可以避免截圖成功後，移除 將texture 造成的閃爍.
            texture.setVisible(false);
        }else{
            cc.director.getRunningScene().visit();
        }

        texture.end();

        //1.4 之前,使用cc.IMAGE_FORMAT_JPG; 1.4 之後,使用cc.IMAGE_FORMAT_PNG
        texture.saveToFile(fileName, cc.IMAGE_FORMAT_PNG);
        this.loadImg(fullPath, callback);

        // 顯示到界面
        // 注意不要這樣賦值spriteFrame ： this.sprite.spriteFrame = renderTexture.getSprite().getSpriteFrame();
        // let texture2d =  texture.getSprite().getSpriteFrame().getTexture();
        // this.sprite.spriteFrame.setTexture(texture2d);
    }

瀏覽器截圖

注意: 適用於 WebGL、Canvas環境

    screenshotWebGL(callback) {
        cc.director.on(cc.Director.EVENT_AFTER_DRAW, () => {
            // 獲取畫布元素
            var canvas = document.getElementById("GameCanvas");
            // 圖片轉換爲(base64)dataURL
            var base64 = canvas.toDataURL("imagea/png"); 
            // 取消渲染註冊
            cc.director.off(cc.Director.EVENT_AFTER_DRAW);
            var frame = this.base64ToSpriteFrame(base64, (frame) => {
                if (callback) callback(frame);
            });
        });
    }

瀏覽器 Canvas環境 截圖

注意: 只適用Canvas環境

    screenshotCanvas(callback) {
        var canvas = document.getElementById("GameCanvas");
        var base64 = canvas.toDataURL("imagea/png");
        var frame = this.base64ToSpriteFrame(base64, (frame) => {
            if (callback) callback(frame);
        });
    }

使用

原生平臺截取節點sprite

        if (cc.sys.isNative ) {
            var targetNode = this.targetSprite.node;
            this.screenshot.screenshotNative('node_native.png', false,targetNode, frame => {
                // 截取有效部分
                var size = cc.director.getWinSize();
                var targetNodeSize = cc.size(targetNode.width, targetNode.height);
                let spriteFrame=this.screenshot.cutPicture(frame,cc.rect((size.width - targetNodeSize.width)/2,(size.height - targetNodeSize.height)/2 ,targetNodeSize.width,targetNodeSize.height));
                this.shot.spriteFrame = spriteFrame;
            });
        } else {
            this.label.string ='is not Native';
        }

原生平臺截屏

        if (cc.sys.isNative ) {
            this.screenshot.screenshotNative('native.png', false, null, frame => {
                this.shot.spriteFrame = frame;
            });
        } else {
            this.label.string = 'is not Native';
        }

瀏覽器截屏

        if (cc.sys.isBrowser) {
            this.screenshot.screenshotWebGL(frame => {
                this.shot.spriteFrame = frame;
            });
        }else {
            this.label.string = 'is not Browser';
        }

瀏覽器Canvas環境截屏

        if(cc.sys.isBrowser) {
            this.screenshot.screenshotCanvas(frame => {
                this.shot.spriteFrame = frame;
            });
        }else {
            this.label.string = 'is not Browser';
        }

碼雲鏈接:https://gitee.com/ls_qq2670813470/Screenshot.
原文鏈接:https://blog.csdn.net/qq_14965517/article/details/104360417.