WebGL readPixels returns 翻转 y 轴

Question

我不知道为什么，但是我从 canvas 读取的图像在 y 轴上翻转了。

最终目标是读取 WebGL 的一部分 canvas 并将其提取为 JPG/PNG。

工作流程如下：

gl.readPixels
创建 2D canvas
将 Uint8Array 像素加载到 2D canvas 作为 imageData
获取 2D canvas 作为 blob
创建对象URL
将其用作图像源

这是我的代码：https://jsitor.com/acM-2WTzd

对于长度（将近 300）我真的很抱歉，但它是 WebGL，有太多的样板和设置。

我试了几个小时调试它，但我不知道（当然它可能是着色器，我在这方面很新）。

如果您有任何其他问题，请随时提出！

Answer 1

不同于context.getImageData(), gl.readPixels()从左下角开始读取像素数据，而不是从左上角开始。您可以在 tempCanvas 上应用变换，并在像这样放置图像数据后将其绘制到自身上：

context.putImageData(imageData, 0, 0);
// add the following
context.translate(0, cropHeight);
context.scale(1, -1);
context.drawImage(tempCanvas, 0, 0);

或者，您可以在从 getPixels() 函数返回之前手动重新排列像素数据：

function getPixels(x, y, width, height) {
  const length = width * height * 4;
  const row = width * 4;
  const end = (height - 1) * row;
  const arr = new Uint8Array(length);
  const pixels = new Uint8Array(length);

  if (draw) draw();
  gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, arr);

  for (let i = 0; i < length; i += row) {
    pixels.set(arr.subarray(i, i + row), end - i);
  }

  return pixels;
}

WebGL readPixels returns 翻转 y 轴

WebGL readPixels returns flipped y axis

javascript

webgl