图像处理中常用的JavaScript调试技巧

在写ref="/tag/184/" style="color:#8B0506;font-weight:bold;">图像处理脚本时，比如用 Canvas 处理滤镜、缩放、裁剪，或者用 WebAssembly 加速图像计算，经常遇到结果不对但看不出哪行出问题的情况。这时候光靠 console.log 打印几个数字，效率低还容易漏掉关键状态。

打断点看像素值变化

比如你写了个灰度转换函数，结果图像全黑或发白。别急着重写，直接在赋值像素那行打个断点：

for (let i = 0; i < data.length; i += 4) {
  const r = data[i];
  const g = data[i + 1];
  const b = data[i + 2];
  // 在这一行右侧点击打个断点
  const gray = 0.299 * r + 0.587 * g + 0.114 * b;
  data[i] = data[i + 1] = data[i + 2] = gray;
}

刷新页面，执行到断点时，鼠标悬停看 r、g、b 的实时值，顺手在控制台输入 gray.toFixed(1) 看是否超出 0–255 范围——很多图像变花，其实是计算溢出后被截断了。

用 console.table 快速查图像数据结构

Canvas 的 getImageData 返回的是一个巨大一维数组，手动翻前10个像素都费劲。试试这个：

const imageData = ctx.getImageData(0, 0, 100, 100);
console.table(Array.from(imageData.data).slice(0, 32));

它会以表格形式展示前32个字节（即前8个像素的RGBA），红绿蓝透明度一目了然，比滚动控制台快得多。

给 canvas 画布加临时标注

有时候逻辑没错，但坐标算偏了——比如图像旋转后 crop 区域错位。可以在调试时临时加一句：

// 调试用：标出 crop 区域
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.strokeRect(x, y, width, height);

画完立刻看到框在哪，比反复改参数试更直观。上线前删掉就行。

监听图像加载失败的静默错误

图像处理常要先加载图片，但 img.onerror 不触发、控制台也没报错？那是跨域或 MIME 类型导致的静默失败。加个兜底检查：

const img = new Image();
img.onload = () => {
  if (img.naturalWidth === 0) {
    console.warn('图片加载完成但尺寸为0，可能是跨域或格式不支持');
  } else {
    // 正常处理
  }
};
img.src = 'photo.jpg';

自然宽高为 0，基本就是加载异常了，不用再猜是路径错还是服务器拒了。

用 performance.now() 定位卡顿源头

做批量图像处理时，页面卡住？别只盯着 for 循环。在关键步骤前后记时间：

const t0 = performance.now();
applySepiaFilter(data);
console.log('滤镜耗时:', performance.now() - t0);

如果某步突然飙到 200ms，就重点查它——说不定是忘了用 Uint8ClampedArray，导致 JS 自动做类型转换拖慢了整条流水线。