#Cocos Creator# 截图功能代码

Cocos官方提供的截图功能代码有明显的错误，没法直接用。

网上都到的其他方案，基本上都是1.x版本的做法。

这里贴一个2.0.5版本测试过的截图功能代码。
https://gist.github.com/zhangzhibin/c515021931cfc9adb6e9bab53b51a3c1

// 截图组件 (如果没有提前添加Camera组件，则会自动添加一个默认参数的Camera)
// 语言：Typescript 
// Cocos 版本： 2.0.5
const {ccclass, property} = cc._decorator;
@ccclass
export default class ScreenShotNode extends cc.Component {
static _inst:ScreenShotNode
// LIFE-CYCLE CALLBACKS:
_camera:cc.Camera;
_texture:cc.RenderTexture;
_sprite:cc.Sprite;

// 初始化
onLoad () {
    ScreenShotNode._inst = this;
    
    // 设置相机参数
    let camera = this.getComponent<cc.Camera>(cc.Camera);
    if(!camera){
        camera = this.addComponent<cc.Camera>(cc.Camera);
    }
    camera.enabled = false; // 避免自动渲染
    
    // 截图的缩放比例       
    let zoom = 0.5;
    
    // 截图的尺寸，本例是640x640的正方形截图
    // 如果是全屏，则为 cc.winSize.width, cc.winSize.height
    let width = 640;  // cc.winSize.width
    let height = 640; // cc.winSize.height
    let size = cc.size(width*zoom, height*zoom);
    
    // 截图的中心点就是摄像机节点的位置
    let origin = cc.v2(0, 0);
    
    camera.zoomRatio = zoom; // 设置缩放
    
    // 设置目标渲染纹理
    let texture = new cc.RenderTexture();
    texture.initWithSize(size.width, size.height);  // 截图矩形的尺寸
    this.node.setPosition(origin);                  // 截图矩形的中心点

    camera.targetTexture = texture;
    
    // 缓存，备用
    this._camera = camera;
    this._texture = texture;
    
    // 用于显示的sprite组件，如果要测试这个，需要添加sprite组件
    this._sprite = this.getComponent<cc.Sprite>(cc.Sprite);

    // var newframe = new cc.SpriteFrame(this._texture);
    // this._sprite.spriteFrame = newframe;
}

shot(){
    // 执行一次 render，将所渲染的内容渲染到纹理上
    this._camera.render(undefined);
    // 到这里，截图就已经完成了
    

    // 接下去，可以从 RenderTexture 中获取数据，进行深加工
    let texture = this._texture;
    let data = texture.readPixels();

    let width = texture.width;
    let height = texture.height;

    // 接下来就可以对这些数据进行操作了       
    // let canvas:HTMLCanvasElement;
    let canvas = document.createElement('canvas'); 
    // document.body.appendChild(btn); // 没有添加到body上，不用担心内存泄漏

    let ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    // 1维数组转2维
    // 同时做个上下翻转
    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");
    // 显示
    this.showTexture(dataUrl);
    // 下载
    this.downloadImg(dataUrl);
    // 分享到Facebook
    // this.shareOnFacebook(dataUrl);
}

// 显示当前截图
// 其实也可以直接用rendertexture来作为SpriteFrame的纹理
showTexture(dataUrl){
    if(!this._sprite){
        console.warn("Need to add a sprite component");
        return;
    }
    
    var img = new Image();
    img.src = dataUrl;
    let self = this;
    img.onload = function(){
        var texture = new cc.Texture2D();
        texture.initWithElement(img);
        texture.handleLoadedTexture();
        var newframe = new cc.SpriteFrame(texture);
        self._sprite.spriteFrame = newframe;
    }
}

// 下载到本地（在H5游戏里不是很实用）
downloadImg(base64:string){
    //把图片生成后download到本地
    
    var href = base64.replace(/^data:image[^;]*/, "data:image/octet-stream");
    document.location.href = href;
}

shareOnFacebook(base64Url:string){
    // Facebook instant game的分享
    FBInstant.shareAsync({
        intent: 'SHARE', // * "INVITE" | "REQUEST" | "CHALLENGE" | "SHARE"
        image: base64Url,
        text: 'X is asking for your help!',
        data: { myReplayData: '...' },
      }).then(function() {
          console.info("share image done");
      }).catch(e=>{
          console.warn("share failed: ", e);
      });
}

static take(){
    ScreenShotNode._inst.shot();
}
}