Firefox加载WebGL2 3D纹理大图时出现NS_ERROR_FAILURE错误

我用WebGL2实现3D纹理加载，把各图层拼成单张大图加载，这个方案在Chrome和Opera里运行正常，但在Firefox中报错。

简化后的测试代码如下：

window.onload = function(){
var image = new Image();
image.onload = function() 
    {   
        var temp = document.createElement('canvas');
        temp.width = 1280;
        temp.height = 720 * 64;
        var tempCtx = temp.getContext('2d');
        tempCtx.drawImage(image, 0, 0);
        // 出错行
        var data = new Uint8Array(tempCtx.getImageData(0, 0, temp.width, temp.height).data.buffer);
        console.log("loaded");  
    };
    image.src = "test.png"; 
}

执行后Firefox报错：

Uncaught NS_ERROR_FAILURE: onload <指向上述标记的代码行>

测试发现小尺寸图片能正常加载，怀疑是Firefox的内存限制，但修改about:config里的dom.max_script_run_time和image.cache.size参数后没用，求解决建议。

• 拆分图像数据读取：不要一次性读取整个大尺寸Canvas的图像数据，分块读取后拼接成完整的Uint8Array，避免单次内存占用过高触发Firefox限制。示例代码：

const chunkHeight = 720; // 单个图层高度
const totalWidth = 1280;
const totalHeight = 720 * 64;
const data = new Uint8Array(totalWidth * totalHeight * 4);

for (let y = 0; y < totalHeight; y += chunkHeight) {
  const currentChunkHeight = Math.min(chunkHeight, totalHeight - y);
  const chunkData = tempCtx.getImageData(0, y, totalWidth, currentChunkHeight).data;
  data.set(chunkData, y * totalWidth * 4);
}

• 调整Canvas尺寸布局：Firefox对单张Canvas的尺寸和内存限制更严格，当前Canvas尺寸为1280×46080，总像素约5898万，内存占用约236MB。可以把3D纹理图层改为横向排列，降低Canvas高度，或拆分多张图分别处理。

• 用ImageBitmap替代Canvas中转：Firefox 54+支持createImageBitmap，可直接处理原图，避免Canvas中转的内存开销，后续可直接用于WebGL纹理：

image.onload = async function() {
  const imageBitmap = await createImageBitmap(image);
  // 直接将ImageBitmap传入WebGL纹理，或按需绘制到Canvas
};

• 修改Firefox内存配置：尝试调整about:config中的以下参数（修改前建议备份配置）：
  • canvas.max_memory_usage：设置更大数值（单位MB），比如512或1024
  • dom.max_memory：调整全局内存限制，按需增大数值

内容的提问来源于stack exchange，提问作者Hito