CocosCreator

CocosCreator-原生平台和web平台的截图方案

2019-09-28  本文已影响0人  vectorZ

因为原生平台和web平台的环境不同,所以截图方案不同,下面提供了2个平台的不同截图方案。作者使用的cocoscreator的版本为1.10.3,可能后续版本有修改,如果后续版本无法使用该方法,请在评论中指出!

原生平台

原生平台使用cc.RenderTexture类缓存当前场景的显示数据。使用的很多方法官方没有向外提供,编辑器会有语法报错,可以在行前使用//@ts-ignore忽略报错。

sceneShot_Naive1() {
        let size = cc.director.getWinSize();
        let fileName = "sceneShot_navie1.png";

        // 两种初始化方式,如果第一种截的图是白色的,需要使用第二种
        // let renderTexture = new cc.RenderTexture(size.width, size.height);
        let renderTexture = new cc.RenderTexture(Math.floor(size.width), Math.floor(size.height), cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
        
        renderTexture.setPosition(cc.v2(size.width / 2, size.height / 2));
        renderTexture.begin();
        cc.director.getRunningScene().visit();
        renderTexture.end();

        // 保存到本地
        // 注意传入的是*文件名*,该方法会默认输出到`jsb.fileUtils.getWritablePath()`的目录下。
        renderTexture.saveToFile("naive_shot.png", cc.ImageFormat.PNG, true);

        // 显示到界面
        // 注意不要这样赋值spriteFrame : this.sprite.spriteFrame = renderTexture.getSprite().getSpriteFrame();
        let texture2d =  renderTexture.getSprite().getSpriteFrame().getTexture();
        this.sprite.spriteFrame.setTexture(texture2d);
}

web平台

使用网页元素生成图片的base64数据来截图。

    sceneShot_web1() {
        return new Promise<cc.Texture2D>((resolve, reject) => {

            let func = () => {
                cc.director.off(cc.Director.EVENT_AFTER_DRAW, func);
                //@ts-ignore
                let canvas: HTMLCanvasElement = document.getElementById("GameCanvas");
                let base64 = canvas.toDataURL();

                var img = new Image();
                img.src = base64;
                img.onload = function () {
                    var texture = new cc.Texture2D();
                    texture.initWithElement(img);
                    texture.handleLoadedTexture();
                    resolve(texture);
                }
                img.onerror = reject;
            };

            // 必须要在渲染过后触发截图方法,并记得一定要取消该方法的注册
            cc.director.on(cc.Director.EVENT_AFTER_DRAW, func);
        });
    }
上一篇下一篇

猜你喜欢

热点阅读