Cocos Creator 2.1 实现截屏

微信分享经常需要用到游戏截屏，下面记录方法，方便查阅。

 
const {ccclass, property} = cc._decorator;
 
//TS 脚本 会报红 不用管 可以运行   JS不会报错
@ccclass
export default class ScreenCaptureWindow extends cc.Component {
 
 
    capture () {
 
        //需要自己自行再创建一个 Camera depth要高于MainCamera 不然会黑屏 
        let camera=cc.find('Canvas/Camera').getComponent(cc.Camera);
        let texture = new cc.RenderTexture();
        texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height);
        //cc.TEXTURE2_D_PIXEL_FORMAT_RGB_A8888,0x88F0
        camera.targetTexture = texture;
        this.texture = texture;
 
 
        let width = this.texture.width;
        let height = this.texture.height;
 
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
 
        camera.render();
        let data = this.texture.readPixels();
        
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let imageData = ctx.createImageData(width, 1);
            let start = srow*width*4;
            for (let i = 0; i < rowBytes; i++) {
                imageData.data[i] = data[start+i];
            }
 
            ctx.putImageData(imageData, 0, row);
        }
 
        var dataURL = canvas.toDataURL("image/jpeg");
        var img = document.createElement("img");
        img.src = dataURL;
        return img;
    }
 
 
    //需要截屏时 调用此方法
    captureAndShow () {
        var img = this.capture();
 
        // You can save the image or show it.
 
        // img.style.position = 'absolute';
        // img.style.display = 'block';
        // img.style.left = '0px'
        // img.style.top = '0px';
        // img.zIndex = 100;
 
        // img.style.transform = cc.game.container.style.transform;
        // img.style['transform-origin'] = cc.game.container.style['transform-origin'];
        // img.style.margin = cc.game.container.style.margin;
        // img.style.padding = cc.game.container.style.padding;
 
        // img.onclick = function (event) {
        //     event.stopPropagation();
        //     img.remove();
        // }
 
        // document.body.appendChild(img);
 
        let texture = new cc.Texture2D();
        texture.initWithElement(img);
 
        let spriteFrame = new cc.SpriteFrame();
        spriteFrame.setTexture(texture);
 
        let node = new cc.Node();
        node.parent = cc.director.getScene();
        node.zIndex = cc.macro.MAX_ZINDEX;
 
        let sprite = node.addComponent(cc.Sprite);
        sprite.spriteFrame = spriteFrame;
        
        node.x = cc.winSize.width/2;
        node.y = cc.winSize.height/2;
        //测试用 点击销毁图片
        node.on(cc.Node.EventType.TOUCH_START, () => {
            node.destroy();
        });
    }
    
}

 

 

Cocos creator 原生截屏方案

 // 注意，EditBox，VideoPlayer，Webview 等控件无法被包含在截图里面
        // 因为这是 OpenGL 的渲染到纹理的功能，上面提到的控件不是由引擎绘制的

        let size = cc.director.getWinSize();
        let fileName = "result_share.jpg";
        let fullPath = jsb.fileUtils.getWritablePath() + fileName;
        if (jsb.fileUtils.isFileExist(fullPath)) {
            jsb.fileUtils.removeFile(fullPath);
        }

        //  若戴截图的场景中包含mask组件，则使用下面这一句： 
        // new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height), cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);//36168
        let texture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height));
        texture.begin();

        // 如果要针对某一个节点截图，则使用: a.node._sgNode.visit()
        cc.director.getRunningScene().visit();
        texture.end();

        texture.setPosition(size.width / 2, size.height / 2);
        texture.saveToFile(fileName, cc.IMAGE_FORMAT_PNG, true, function () {
            console.log("截屏成功");
            console.log("fullPath: " + fullPath);
        });