【cocos creator】【TS】指定节点截屏，图片保存到本地

const { ccclass, property } = cc._decorator;

@ccclass
export default class ScreenshotCtrl extends cc.Component {


    @property(cc.Node)
    ScreenshotNode: cc.Node = null;

    onScreenshot() {
        this.captureScreen(this.node)
    }


    public getCameraTexture(node: cc.Node): cc.RenderTexture {
        let camera = node.addComponent(cc.Camera);
        // 设置你想要的截图内容的 cullingMask
        camera.cullingMask = 0xffffffff;
        camera.clearFlags = cc.Camera.ClearFlags.STENCIL | cc.Camera.ClearFlags.DEPTH;
        camera.depth = 0;
        camera.rect = cc.rect(0, 0, 1, 1);
        camera.zoomRatio = Math.min(cc.winSize.height / node.height, cc.winSize.width / node.width)

        // 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。
        let texture = new cc.RenderTexture();
        texture.initWithSize(node.width, node.height);
        camera.targetTexture = texture;
        camera.render(node);
        //移除相机组件并且销毁相机
        node.removeComponent(camera);
        camera.destroy();
        return texture;
    }
    /**
         * 截屏
         * @param {*摄像机 cc.Camera类型} camera 
         */
    screenShot(node) {
        const texture: cc.RenderTexture = this.getCameraTexture(node)
        let canvas = null;
        //第一步------>给摄像机指定渲染目标 不直接渲染到屏幕上
        //第二步----->创建并渲染画布
        let width = texture.width;
        let height = texture.height;
        if (canvas == null) {
            //创建canvas
            canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
        } else {
            //清理画布上指定矩形区域内的像素
            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        }
        //返回值 ctx 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
        let ctx = canvas.getContext('2d');
        //readPixels 方法 从 render texture 读取像素数据
        let data = texture.readPixels();
        //把从摄像机读取的像素 渲染到canvas画布上去
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = row;
            let imageData = ctx.createImageData(width, 1);//创建新的空白 ImageData 对象
            let start = srow * width * 4;
            for (let i = 0; i < rowBytes; i++) {
                imageData.data[i] = data[start + i];
            }
            ctx.putImageData(imageData, 0, height - row - 1);//将图像数据拷贝回画布上
        }

        let a = document.createElement("a");
        a.download = "test1.png";
        a.href = canvas.toDataURL("image/png");
        a.click();
    }

    /**
        * @description 截图
        * @param screenshotNode 截图节点
        * @returns 存放截图的本地路径
        * 注意1.全屏截图需要添加自适应组件
        *  2.带透明的需要存储png格式（会出现亮斑）
        *  3需要占用内存少，不被透明度营销就存储为.jpg格式
        */
    public captureScreen(screenshotNode: cc.Node): Promise<string> {
        return new Promise((resolve, reject) => {
            const renderTexture = this.getCameraTexture(screenshotNode)
            const imgData = renderTexture.readPixels()
            if (CC_JSB) {   //CC_JBS标志是原生平台
                const shareImgRootPath = `${jsb.fileUtils.getWritablePath()}ShareImg/`
                const imgFilePath = shareImgRootPath + "_shareImg.jpg"
                console.log(`imgFilePath:`, imgFilePath);
                //@ts-ignore
                const success = jsb.saveImageData(imgData, screenshotNode.width, screenshotNode.height, imgFilePath)
                //文件写成功之后，返回图片存储的路径
                if (success) {
                    resolve(imgFilePath)
                }
                else {
                    console.log(`save imgData failed! path:`, imgFilePath);
                    reject(null)
                }
            }
            else {
                this.screenShot(this.ScreenshotNode)
            }
        })
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111