cocos creator h5 截屏代码

```

(function()
{
    const canvasNode = cc.director.getScene().getChildByName("Canvas");

    if (!canvasNode) {
        console.error("未找到 Canvas 节点");
    }

    // 创建临时 Camera 和 RenderTexture(原始代码)
    const cameraNode = new cc.Node();
    cameraNode.parent = cc.find("Canvas"); // 挂载到 Canvas 下避免层级问题
    const camera = cameraNode.addComponent(cc.Camera);

    // 配置相机参数
    camera.targetTexture = new cc.RenderTexture();
    camera.targetTexture.initWithSize(canvasNode.width, canvasNode.height);
    camera.cullingMask = 0xffffffff; // 渲染所有层
    camera.clearFlags = cc.Camera.ClearFlags.DEPTH; // 只清除深度缓冲
    camera.render(canvasNode); // 渲染 Canvas 节点

    // 从 RenderTexture 读取像素数据并转换为图片(原始代码)
    const texture2D = new cc.Texture2D();
    var canvas2 = document.getElementById('GameCanvas');
    texture2D.initWithElement(canvas2); // 或使用 RenderTexture 的数据(需额外处理)

    // 转换为 SpriteFrame 并显示(示例)(原始代码)
    const spriteFrame = new cc.SpriteFrame(texture2D);
    const previewNode = new cc.Node();
    const sprite = previewNode.addComponent(cc.Sprite);
    sprite.spriteFrame = spriteFrame;
    

    
    cc.director.getScene().addChild(previewNode);

    //canvasNode.children.unshift(previewNode);

    // ==================== 新增:保存 previewNode 的纹理为图片 ====================
    // 1. 创建一个新的 RenderTexture 专门用于渲染 previewNode
    const saveRenderTexture = new cc.RenderTexture();
    saveRenderTexture.initWithSize(previewNode.width, previewNode.height);

    // 2. 创建一个临时 Camera 专门用于渲染 previewNode
    const saveCameraNode = new cc.Node();
    saveCameraNode.parent = cc.director.getScene(); // 直接挂载到场景下
    const saveCamera = saveCameraNode.addComponent(cc.Camera);
    saveCamera.targetTexture = saveRenderTexture;
    saveCamera.cullingMask = 0xffffffff; // 渲染所有层
    saveCamera.clearFlags = cc.Camera.ClearFlags.DEPTH; // 只清除深度缓冲

    // 3. 调整 Camera 的视口,使其只渲染 previewNode
    // (这里简化处理,直接渲染整个节点)
    saveCamera.render(previewNode);

    // 4. 从 saveRenderTexture 读取像素数据
    const pixels = saveRenderTexture.readPixels();
    const width = saveRenderTexture.width;
    const height = saveRenderTexture.height;

    // 5. 创建 ImageData 并转换 BGRA -> RGBA,同时上下翻转
    const imageData = new ImageData(width, height);
    const data = imageData.data;

    // 遍历每一行,从下往上读取像素(实现上下翻转)
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // 计算原始像素位置(从左下角开始)
            const srcIndex = (y * width + x) * 4;
            // 计算翻转后的像素位置(从左上角开始)
            const dstIndex = ((height - 1 - y) * width + x) * 4;

            // BGRA -> RGBA
            data[dstIndex] = pixels[srcIndex ];     // R (原 B)
            data[dstIndex + 1] = pixels[srcIndex + 1]; // G (原 G)
            data[dstIndex + 2] = pixels[srcIndex + 2];     // B (原 R)
            data[dstIndex + 3] = pixels[srcIndex + 3]; // A (原 A)
        }
    }

    // 6. 创建 canvas 并绘制图像
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);

    // 7. 将 canvas 转换为 base64 图片数据
    const dataURL = canvas.toDataURL('image/png');

    // 8. 创建 <a> 标签并触发下载
    const link = document.createElement('a');
    link.download = 'preview_screenshot.png';
    link.href = dataURL;
    link.click(); // 触发下载
    // ==================== 新增代码结束 ====================

    // 9. 截屏完成后移除 previewNode
    previewNode.removeFromParent();

    // 销毁临时 Camera 和 RenderTexture
    saveCameraNode.destroy();
    saveRenderTexture.destroy();

    // 销毁原始临时相机
    cameraNode.destroy();
})()

```

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值