將存儲RGBA的Uint8Array數組保存到.png文件

Question

我目前正在嘗試將ThreeJS的屏幕快照保存在特定區域中以進行歸檔。

到目前為止，我只嘗試將圖像顯示在新選項卡中，並且可以使用

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

渲染器是一個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();

這不是最好的方法，但是確實有效。

Answer 2

如果您只想使用它的一小部分，而不是調用gl.readPixels只需使用源的width和height參數來drawImage

var gl = renderer.getContext();

var ctx = document.createElement('canvas').getContext("2d");

ctx.canvas.width = width;
ctx.canvas.height = height;

ctx.drawImage(gl.canvas, 0, 0, width, height, 0, 0, width, height);

window.open(ctx.canvas.toDataURL());

有3個版本的drawImage

1. drawImage(image, dstX, dstY)

2. drawImage(image, dstX, dstY, dstWidth, dstHeight)

3. drawImage(image, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight)