javascript - 将存储 RGBA 的 Uint8Array 数组保存到 .png 文件

Question

我目前正在尝试将 ThreeJS 在特定区域的屏幕截图保存到文件中。

到目前为止，我只尝试让图像显示到新选项卡中，我已经可以使用它了

window.open(renderer.domElement.toDataURL("image/png"));

renderer 是一个 THREE.WebGLRenderer 对象，preserveDrawingBuffer: true

但是那使用了整个场景，所以我切换到:

    var gl = renderer.getContext();
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    window.open("data:image/png;base64," + btoa(String.fromCharCode.apply(null, pixels)));

通过这样做，除了一个灰色轮廓的正方形之外什么都没有呈现

Answer 1

在意识到数据不是 png 的正确格式后制定了解决方案。

    var gl = renderer.getContext();
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var imageData = ctx.createImageData(width, height);

    for(var i = 0; i < imageData.data.length; i+=4) {
        imageData.data[i + 0] = pixels[i + 0];
        imageData.data[i + 1] = pixels[i + 1];
        imageData.data[i + 2] = pixels[i + 2];
        imageData.data[i + 3] = pixels[i + 3];
    }

    ctx.putImageData(imageData,0,0);
    window.open(canvas.toDataURL("image/png"));
    canvas.remove();

这不是最好的方法，但它奏效了。