Cocos Creator截图

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

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

Cocos Creator2.0截图

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

let node = new cc.Node();
node.parent = cc.director.getScene();
let camera = node.addComponent(cc.Camera);

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

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

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

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

// 接下来就可以对这些数据进行操作了
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = texture.width;
canvas.height = texture.height;

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

let dataURL = canvas.toDataURL("image/jpeg");
let img = document.createElement("img");
img.src = dataURL;

Cocos Creator1.x 截图

遇到的问题

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

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

Q&A：

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

截图核心代码：

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

renderTexture.begin();
cocos._sgNode.visit();
renderTexture.end();
// 保存截图文件
renderTexture.saveToFile("shot.png", cc.IMAGE_FORMAT_PNG, true, function () { });

// 获取图片保存地址
jsb.fileUtils.getWritablePath()

Demo

https://github.com/wf96390/CocosScreenShotDemo