Fabric.js 图层缩略图：长图不爆内存的生成策略

图层面板里，每个层需要一个很小的缩略图预览。最直觉的做法是 obj.toDataURL() 把整个对象渲染出来。可一旦遇到 超长图/超高图 ，直接生成缩略图会两败俱伤：要么 toDataURL 直接返回一个空字符串给我们 "data:," ，要么把内存吃爆。这篇文章记录我的兜底方案。

一、按比例算出合理倍率

toDataURL 支持 multiplier 参数，它代表渲染倍率。要知道长图之所以失败，是因为它整体的原始尺寸过大，浏览器在绘图时爆掉。我们需要把缩略图控制在合理范围内——比如目标 150px 左右：

function calcMultiplier(obj) {
  const target = 150;
  let lpz = 1;
  if (obj.width > target || obj.height > target) {
    lpz = Math.min(target / obj.width, target / obj.height);
  }
  if (lpz < 0.4) lpz = 0.4; // 不缩太狠，避免细节丢失
  return Math.round(lpz * 100) / 100;
}

二、阶梯回退生成

即使算出了合理比例，某些极端图（如超超长拼接图）仍然可能失败，返回值是 "data:," 。解决方案是"层层加大 multiplier 重试"，直到不返回空字符串为止：

function safeThumbnail(obj) {
  let lpz = scaleMultiplier(obj);
  let thumbnail = obj.toDataURL({ multiplier: lpz });

  let maxLoop = 5;
  let cur = 0;
  // 比例太小导致空白时，逐步加大
  while (thumbnail === 'data:,' && cur < maxLoop) {
    cur++;
    lpz *= 2;               // 成倍加大
    thumbnail = obj.toDataURL({ multiplier: lpz });
  }
  if (thumbnail === 'data:,') {
    // 最终兜底：用空白占位，不再让用户看到白块
    thumbnail = 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
  }
  return { thumbnail, lpz };
}

这个 while 循环的思路很实用：极端的"长宽比"导致第一次渲染失败，就逐级放大倍率重试，直到成功或达到上限。

三、缩略图换页：为什么偶尔是空白

还有一个坑：如果对象本身是隐藏的（ visible=false ）， toDataURL 可能兜不到内容。所以生成缩略图前要临时把 visible 设为 true ，生成后再恢复；或者只对可见层生成。

四、内存与性能

为图层面板一次性生成几十个缩略图，滚动时也有卡顿风险。几个优化点：

1. 惰性生成 + 缓存 ：不一次性全生成，用 IntersectionObserver 或滚动到底时生成并缓存到对象上（ obj.set({ thumbnail }) ），下次滚动直接读缓存。
2. 控制倍率下限 ： lpz 不要无限小，保住视觉可读性。
3. 及时释放 ：缩略图是 base64 字符串，每次 toDataURL 都会占内存。切换图层/删除缩略图时要清理缓存，避免堆积。

五、避坑总结

• 返回空 "data:," 是"长了/宽了"信号，先加大倍率重试，再判断真正失败。
• 计算倍率要基于 min(target/width, target/height) ，而不是单纯除。
• 隐藏层的缩略图和可见层不同，生成前先保证 visible=true 。
• 真正失败的场景，兜底给一个占位图，别让用户看到裂图。

六、验证

用一张 4000×100 的超长图和一张 100×4000 的超高图，分别调用 generateThumbnail ，确认都能吐出非空缩略图；再测量生成耗时，确认没有明显长时卡死。测试最终呈现清晰可用。

FAQ 常见问题

• 问：超长/超宽图生成缩略图返回空 "data:," 是为什么？
  它通常是"长了/宽了一定倍率"的降档信号。先按 min(target/width, target/height) 加大倍率重试，仍为空再判定真正的失败；别一看到空 data 就砍成裂图。

• 问：为什么缩略图偶尔是空白？
  多半是图层被隐藏了（ visible=false ）。生成缩略图前先确保目标层 visible=true ，用 toDataURL 或离屏 canvas 渲染时不会被空帧接管。

• 问：生成的缩略图会不会把大图内存再吃一遍？
  只要采用"按比例降采样、阶梯回退"的方式限制目标像素，内存峰值可控；用完后及时释放临时 canvas 与 URL.createObjectURL ，避免长图 base64 一直挂内存。