Javascript WebGL readPixels返回翻转的y轴

我不知道为什么，但我从画布上读到的图像会在y轴上翻转

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

工作流程如下所示：

• gl.readPixels
• 创建二维画布
• 将UINT8阵列像素作为图像数据加载到二维画布
• 将二维画布获取为blob
• 创建对象URL
• 将其用作图像src

这是我的密码：

我真的很抱歉长度（近300），但它是WebGL，有这么多的样板和设置

---

我已经试着调试了好几个小时，但我不知道（就算它可能是着色器，我在这方面还是新手）

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

与之不同，从左下角开始读取像素数据，而不是从左上角开始读取。您可以在

tempCanvas

上应用转换，并在像这样放置图像数据后将其绘制到自身上：

context.putImageData（imageData，0,0）；
//添加以下内容
上下文翻译（0，cropHeight）；
上下文。量表（1，-1）；
drawImage（tempCanvas，0,0）；

或者，您可以在从

getPixels（）函数返回像素数据之前手动重新排列像素数据：

函数获取像素（x、y、宽度、高度）{
常数长度=宽度*高度*4；
常量行=宽度*4；
const end=（高度-1）*行；
const arr=新的UINT8阵列（长度）；
常量像素=新的UINT8阵列（长度）；
if（draw）draw（）；
gl.readPixels（x，y，宽度，高度，gl.RGBA，gl.UNSIGNED_字节，arr）；
for（设i=0；i