Chrome/Firefox中context.drawImage()插值算法及验证方法

核心结论 #

• Chrome/Chromium：当imageSmoothingEnabled设为false时，**所有缩放场景（放大、缩小、等比例、9参数拉伸）**都会强制使用最近邻插值，无缩放方向或参数形式的限制。
• Firefox：同样，设置imageSmoothingEnabled为false后，**所有drawImage调用场景（包括9参数模式）**均采用最近邻插值，覆盖全缩放场景。

测试代码验证 #

可以通过生成单像素测试图，缩放后检查像素一致性的方式验证，代码示例：

// 创建1x1红色单像素源画布
const srcCanvas = document.createElement('canvas');
srcCanvas.width = 1;
srcCanvas.height = 1;
const srcCtx = srcCanvas.getContext('2d');
srcCtx.fillStyle = '#ff0000';
srcCtx.fillRect(0, 0, 1, 1);

// 定义全场景测试用例
const testCases = [
  { width: 10, height: 10, desc: '等比例放大' },
  { width: 1, height: 10, desc: '垂直拉伸缩小' },
  { width: 10, height: 1, desc: '水平拉伸缩小' },
  { sx: 0, sy: 0, sw: 1, sh: 1, dx: 0, dy: 0, dw: 7, dh: 12, desc: '9参数非等比例拉伸' }
];

testCases.forEach(test => {
  const canvas = document.createElement('canvas');
  canvas.width = test.dw || test.width;
  canvas.height = test.dh || test.height;
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;
  
  // 执行对应drawImage调用
  if (test.sx !== undefined) {
    ctx.drawImage(srcCanvas, test.sx, test.sy, test.sw, test.sh, test.dx, test.dy, test.dw, test.dh);
  } else {
    ctx.drawImage(srcCanvas, 0, 0, test.width, test.height);
  }
  
  // 验证所有像素是否为纯红色（最近邻插值不会产生混合色）
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const isNearestNeighbor = Array.from(imageData.data).every((val, idx) => {
    switch (idx % 4) {
      case 0: return val === 255; // R通道
      case 1: return val === 0;    // G通道
      case 2: return val === 0;    // B通道
      case 3: return val === 255;  // A通道
      default: return true;
    }
  });
  
  console.log(`${test.desc}: ${isNearestNeighbor ? '使用最近邻插值' : '未使用最近邻插值'}`);
});

运行后若所有测试用例均输出“使用最近邻插值”，则对应浏览器符合需求。

源码层面验证思路 #

Chromium #

1. 核心逻辑在SkiaCanvas2DContext.cpp中，当imageSmoothingEnabled设为false时，上下文的filterQuality会被强制设为kNone，对应SkFilterMode::kNearest插值模式。
2. 9参数drawImage最终调用SkCanvas::drawImageRect，该方法会直接使用上下文预设的插值模式，不受缩放方向影响。

Firefox #

1. 关键处理在CanvasRenderingContext2D.cpp的SetImageSmoothingEnabled方法，设置mImageSmoothingEnabled标志后，所有DrawImage相关调用都会检查该标志。
2. 标志为false时，采样模式会被设为SamplingFilter::Nearest，覆盖所有缩放、拉伸场景。

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