Cocos Creator截图

在中，我们一般通过来完成截图功能，但是这是属于旧版本渲染树中的一个功能，在Cocos Creator2.0去除渲染树后，截图功能的使用方式也完全不同了。简单来说，2.0 中变成了一个资源类型，继承自贴图（）资源。我们通过将某个摄像机内容渲染到资源上完成截图，具体的使用方式参考Cocos Creator文档中 Camera 文档截图章节。

摄像机可能是到 2.0 改动最大的一个组件，为了可以顺畅更新，Creator 尽量保持了组件层 API 的一致性，然而 Camera 的使用方式和 API 却无法做到简单迁移。因为在 2.0 中，Camera 从一个配角变成了主角。

Cocos Creator2.0截图

官方文档里给出了浏览器的截图方法，但是没有提供保存图片的方法，所以原生平台目前大概还不能用

let node = new ();
 = ();
let camera = ();

// 设置你想要的截图内容的 cullingMask
 = 0xffffffff;

// 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。
let texture = new ();
(, );
 = texture;

// 渲染一次摄像机，即更新一次内容到 RenderTexture 中
();

// 这样我们就能从 RenderTexture 中获取到数据了
let data = ();

// 接下来就可以对这些数据进行操作了
let canvas = ('canvas');
let ctx = ('2d');
 = ;
 = ;

let rowBytes = width * 4;
for (let row = 0; row < height; row++) {
    let srow = height - 1 - row;
    let imageData = (width, 1);
    let start = srow*width*4;
    for (let i = 0; i < rowBytes; i++) {
        [i] = data[start+i];
    }

    (imageData, 0, row);
}

let dataURL = ("image/jpeg");
let img = ("img");
 = dataURL;

Cocos 截图

遇到的问题

首先如果截取的是整个Canvas的话，官方文档也没有详细的说明，直接使用就可以截图

但是如果截取的是单个node，则显示会有问题

Q&A：

1.如果只截取到部分图片？
需要将截取的节点的父节点的锚点设置为（0，0）
2.截取图片后，整个node会移动到左下？
可以先将该node隐藏，然后再显示出截取的图片替代该node
3.如何截取有mask的节点？
创建时，需要增加两个参数： (640,960, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);

截图核心代码：

let cocos = ('cocos2', this.node);
    // 创建 renderTexture
let renderTexture = (
    ,
    ,
    cc.Texture2D.PIXEL_FORMAT_RGBA8888,
    gl.DEPTH24_STENCIL8_OES
);

();
cocos._sgNode.visit();
();
// 保存截图文件
("", cc.IMAGE_FORMAT_PNG, true, function () { });

// 获取图片保存地址
()

Demo

/wf96390/CocosScreenShotDemo

秒客网