VueJS中显示大体积TIFF图片时栈溢出错误的解决求助

错误原因 #

处理大体积TIFF图片时，bytes数组长度过大，String.fromCharCode.apply(null, bytes)会将数组所有元素作为独立参数传递，超出JavaScript引擎的调用栈大小限制，触发Maximum call stack size exceeded错误。

解决方案1：分块转换Base64 #

将大数组拆分成小块处理，避免一次性传递过多参数：

GDAL.gdal_translate(tifDataset, options).then((output) => {
  GDAL.getFileBytes(output).then((bytes) => {
    // 分块转换二进制数组为Base64
    function arrayBufferToBase64(buffer) {
      let binary = '';
      const byteArray = new Uint8Array(buffer);
      const chunkSize = 1024 * 1024; // 按1MB分块，可按需调整
      for (let i = 0; i < byteArray.length; i += chunkSize) {
        const chunk = byteArray.subarray(i, i + chunkSize);
        binary += String.fromCharCode.apply(null, chunk);
      }
      return btoa(binary);
    }

    const base64Data = arrayBufferToBase64(bytes);
    const img = document.createElement("img");
    img.src = "data:image/png;base64," + base64Data;
    elm.appendChild(img);
  });
});

解决方案2：使用Blob + Object URL（更高效） #

跳过Base64转换，直接用Blob创建临时URL，适合大文件场景，还能减少内存占用：

GDAL.gdal_translate(tifDataset, options).then((output) => {
  GDAL.getFileBytes(output).then((bytes) => {
    const blob = new Blob([bytes], { type: 'image/png' });
    const imgUrl = URL.createObjectURL(blob);
    
    const img = document.createElement("img");
    img.src = imgUrl;
    // 图片加载完成后释放临时URL内存
    img.onload = () => URL.revokeObjectURL(imgUrl);
    elm.appendChild(img);
  });
});

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