关于creator2.4.10截图保存本地

Creator 2.x
#1

  • Creator 版本： creator2.4.10

  • 标题： 经验分享：creator截图功能总结

  • 直接贴代码：

    // 1.创建一个 RenderTexture 对象
    let renderTexture = new cc.RenderTexture();
    let designResolutionSize = cc.visibleRect;
    let width = designResolutionSize.width;
    let height = designResolutionSize.height;
    renderTexture.initWithSize(width, height);
    console.log(“designResolutionSize”,designResolutionSize)
    // 2.创建canvas
    let canvas = qq.createCanvas();
    console.log(canvas)
    canvas.width = width;
    canvas.height = height;
    console.log("canvas.content: ", canvas.width, canvas.height);
    // 3.创建Camera
    var node = new cc.Node(“screen”);
    node.parent = cc.Canvas.instance.node;
    var camera = node.addComponent(cc.Camera);
    camera.backgroundColor = cc.Color.TRANSPARENT;
    camera.clearFlags = cc.Camera.ClearFlags.DEPTH | cc.Camera.ClearFlags.STENCIL | cc.Camera.ClearFlags.COLOR;
    const worldPos = cc.Canvas.instance.node.convertToWorldSpaceAR(cc.Vec2.ZERO);
    const localPos = camera.node.parent.convertToNodeSpaceAR(worldPos);
    camera.node.setPosition(localPos);
    camera.targetTexture = renderTexture;
    camera.render();
    camera.targetTexture = null;
    // 4.获取绘图上下文
    let ctx = canvas.getContext(‘2d’);
    let data = renderTexture.readPixels();
    // 绘制内容到 canvas
    // 由于 RenderTexture 的像素数据是上下颠倒的，所以需要翻转
    let rowBytes = width * 4;
    let imageData = ctx.createImageData(width, height);
    let dataIndex = 0
    for (let row = 0; row < height; row++) {
    let srow = height - 1 - row;
    let start = srow * width * 4;
    for (let i = 0; i < rowBytes; i++) {
    // 这里对demo进行优化，不需要每一次绘制全部
    imageData.data[dataIndex++] = data[start + i];
    }
    }
    ctx.putImageData(imageData, 0, 0);
    // 5.将 canvas 保存为临时文件
    canvas.toTempFilePath({
    success: (res) => {
    // 保存成功，获取临时文件路径
    const tempFilePath = res.tempFilePath;
    console.log("临时文件路径： ", tempFilePath);
    // 这里使用qq小游戏api进行保存资源
    // 使用临时文件路径进行下一步操作，如保存到相册
    qq.saveImageToPhotosAlbum({
    filePath: tempFilePath,
    success: () => {
    console.log(‘图片保存成功’);
    },
    fail: (err) => {
    console.error(‘图片保存失败’, err);
    }
    });
    },
    fail: (err) => {
    // 保存失败
    console.error(‘canvas 转临时文件失败’, err);
    }
    });
    camera.targetTexture = null;
    renderTexture.destroy();

  • 亲测效果OK，如有新方案，欢迎分享讨论

4赞
#2

该功能基于creator2.4demo改进

#3

大佬能发个3.8.2版本的不，新版本不太适用

#4

为什么我的截图是白屏。。。