从 png 创建纹理时截断的图像答案

【问题标题】：Truncated image when creating textures from png从 png 创建纹理时截断的图像
【发布时间】：2013-04-03 18:04:24
【问题描述】：

我正在尝试使用以下代码从 png 中创建纹理：

...
var texture = gl.createTexture();
var img = new Image();
img.onload = function () {
    gl.activeTexture(gl.GL_TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
}
img.src = "/path/to/image.png"

我的问题是 WebGL 抱怨“错误的图像数据”。在萤火虫中调试显示图像被截断，下载的 png 文件只是原始文件的一部分 - 上半部分。 Firefox 还抱怨“图像已损坏或被截断”。原始文件约为 1.8 MB (2048x1024)。可能是什么问题，我该如何解决？

【问题讨论】：

标签： javascript html webgl textures

【解决方案1】：

您的问题有多种可能的原因，但您可以采取一些措施来尝试缩小范围。

尝试将图像大小调整为 2048x2048 和 1024x1024，以防问题是基于您的纹理不是方形的。

还可以尝试将纹理保存为 .jpg 并尝试加载。还可以在您选择的图像编辑器中打开您的 png，并尝试保存几个不同的 png types（基于调色板、灰度、RGB、具有透明度的 RGB、RGBA 等），看看它是否会加载。

【讨论】：

我已经尝试过调整大小但没有成功。将尝试其他两个以查看结果。但是，他们不会解决我的问题，因为 png 是给我的，我无法更改它们。您能否提及一些您认为可能的原因？我不知道。