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

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

Cocos Creator2.0截图

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

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 就能够截图git

可是若是截取的是单个node，则显示会有问题github

Q&A：web

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

截图核心代码：

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浏览器