cocos creator 2.4.3按照文档实现截屏只截到一部分怎么解决

Creator 2.x
#1

按照文档实现截屏只截到2

reliao_1631699417739.jpeg
reliao_1631699417739.jpeg366×830 66.5 KB

[image][image]

  • Creator 版本： 2.4.3

  • 目标平台： chrome
    demo版本如下

  • 重现方式：
    Test.rar (819.1 KB)
    麻烦大佬帮忙看看这个是版本的问题吗？

#2

记得之前用cocos creator 2.1.3时还是好的，

#3

有人做过截屏的吗，能给个正常截屏的demo吗

#4

public static captureTexture(cullingMask: number = 0, camera: cc.Camera = null) {

    let node: cc.Node = null;

    let needRemove = false;

    if (!camera) {

        needRemove = true;

        node = new cc.Node();

        //注意了，这里要讲节点的位置改为右上角，不然截图只有1/4

        // node.width = cc.view.getVisibleSize().width;

        // node.height = cc.view.getVisibleSize().height;

        // node.x = node.width / 2;

        // node.y = node.height / 2;

        node.parent = cc.director.getScene();

        camera = node.addComponent(cc.Camera);

        camera.backgroundColor = cc.Color.TRANSPARENT;

        camera.clearFlags = cc.Camera.ClearFlags.DEPTH | cc.Camera.ClearFlags.STENCIL | cc.Camera.ClearFlags.COLOR

        // 设置你想要的截图内容的 cullingMask

        camera.cullingMask = cullingMask || 0xffffffff;

        camera.alignWithScreen=true;

    }

    // 新建一个 RenderTexture，并且设置 camera 的 targetTexture 为新建的 RenderTexture，这样 camera 的内容将会渲染到新建的 RenderTexture 中。

    let texture = new cc.RenderTexture();

    let gl = (cc.game as any)._renderContext; // STENCIL_INDEX8 0x8D48 https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Constants

    // 如果截图内容中不包含 Mask 组件，可以不用传递第三个参数

    texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height,gl.STENCIL_INDEX8);

    // texture.initWithSize(cc.visibleRect.width, cc.visibleRect.height, (cc as any).gfx.RB_FMT_S8);

    camera.targetTexture = texture;

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

    camera.render(cc.director.getScene());

    if (needRemove) {

        camera.enabled = false;

        camera.destroy();

    } else {

        camera.targetTexture = null;

    }

    // 这样我们就能从 RenderTexture 中获取到数据了

    let data = texture.readPixels();

    let width = texture.width;

    let height = texture.height;

    let picData = this.filpYImage(data, width, height);

    //翻转Y

    let canvas = document.createElement('canvas');

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

    let rowBytes = width * 4;

    for (let row = 0; row < height; row++) {

        let startRow = height - 1 - row;

        let imageData = ctx.createImageData(width, 1);

        let start = startRow * 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");

    console.log(dataURL);

    if (node) {

        node.removeFromParent();

        node.destroy();

    }

    return { data: picData, width: width, height: height };

}
#5

代码这样子按官方文档里面写的应该没问题啊，我加上 camera.render(cc.director.getScene());这个貌似也不行

#6

找到问题了，摄像机位置不对， node.position = cc.v3(cc.visibleRect.width/2,cc.visibleRect.height/2)，他默认被放置在左下角的点位置上，从而只截取了左下的四分之一屏

#7

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。