关于单节点截图

Creator 2.x
#1

如何实现单节点截图，环境是2.0.9，官方的例子是截屏，有没有单节点截图的例子或者提供下思路，希望官方能写个例子

如何对某个节点截屏
#2

/**
* 以某个节点为目标，截取目标节点内容图片，返回临时图片路径；想要截图干净点，请把目标节点移到屏幕之外
* @param {Object} distNode 截图的目标节点
* @example
* captureNode2(cc.find(‘Canvas’)).then(imgUrl=>{console.log(imgUrl)});
*/
captureNode2(distNode,showLoading=0){
return new Promise((resolve , reject) => {
// if(!Game.isWechat()){
// reject(‘not wechat’);
// return;
// }
showLoading && wx.showLoading();
// distNode.zIndex = 10;
let width = Math.floor(distNode.width);
let height = Math.floor(distNode.height);
let cameraNode = distNode.getChildByName(‘cameraNode’);
if(!cameraNode){
cameraNode = new cc.Node(‘cameraNode’);
cameraNode.parent = distNode;
cameraNode.x = 0;
cameraNode.y = 0;
}
let camera = cameraNode.getComponent(cc.Camera);
if(!camera){
camera = cameraNode.addComponent(cc.Camera);
}

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

        // 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。
        let texture = new cc.RenderTexture();
        // 初始化纹理大小，如果截图内容中不包含 Mask 组件，可以不用传递第三个参数
        texture.initWithSize(width, height, cc.game._renderContext.STENCIL_INDEX8);
        camera.targetTexture = texture;

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

        // 这样我们就能从 RenderTexture 中获取到数据了
        let data = texture.readPixels();
        console.log(data);
        // 接下来就可以对这些数据进行操作了
        let tempCanvas = document.createElement('canvas');
        let ctx = tempCanvas.getContext('2d');
        tempCanvas.width = texture.width;
        tempCanvas.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 = Math.floor(srow*width*4);
            for (let i = 0; i < rowBytes; i++) {
                imageData.data[i] = data[start+i];
            }

            ctx.putImageData(imageData, 0, row);
        }
        // let dataURL = tempCanvas.toDataURL("image/png");
        // console.log(dataURL);
        // resolve(dataURL);
        // return;
        var tempFilePath = cc.game.canvas.toTempFilePathSync({
            x: 0,
            y: 0,
            width: width,
            height: height,
            destWidth: width,
            destHeight: height,
        });
        if(tempFilePath){
            showLoading && wx.hideLoading();
            resolve(tempFilePath);
        }else{
            showLoading && wx.hideLoading();
            reject(err);
        }
    })
}

最近发现小游戏公共库版本6.2以上加入子域排行榜的项目，该方法截图会是全透明图。上面代码已被强行拆分，请复制完整代码测试。

2赞
#3

请问下，如何保存截图呢，网上有很多例子用的saveToFile，但是我Android调试报错，renderTexture没有saveToFile这个方法

#4

请问加入子域 截图透明问题解决了吗