为何Canvas标签与img标签显示的图像存在差异？

使用<img>标签展示图像时显示效果正常，但通过Canvas的drawImage方法绘制同一图像时出现若干亮像素。将图像转换为JPG、BMP、PNG格式后测试，问题仍未解决，测试图像由KIKO Software提取生成。

测试代码如下：

JavaScript代码 #

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 0, 0, 300, 400);
});

HTML代码 #

<div style="display: flex;">
  <div style="margin-right:50px;">
    <img id="scream" width="300" src="https://i.sstatic.net/6ktihBMk.png">
    <h1>Using tag img</h1>
  </div>

  <div>
    <canvas id="myCanvas" width="297" height="400" style="border:1px solid grey;">
      Sorry, your browser does not support canvas.
    </canvas>
    <h1>Using tag canvas with drawImage</h1>
  </div>
</div>

问题原因分析 #

1. Canvas尺寸与绘制尺寸不匹配：你的canvas元素width属性设为297，但drawImage指定的绘制宽度是300，强制缩放会触发浏览器插值算法，可能引入异常亮像素。
2. 默认图像平滑处理：浏览器默认开启图像平滑，部分图像在缩放时的平滑计算会产生不符合预期的亮像素。
3. 图像特殊属性：KIKO Software提取的图像可能带有特殊色彩空间或Alpha通道信息，Canvas的渲染逻辑与<img>标签存在差异。

解决方法 #

1. 匹配Canvas与绘制尺寸 #

将canvas的width属性修改为300，和drawImage的目标尺寸保持一致，避免强制缩放：

<canvas id="myCanvas" width="300" height="400" style="border:1px solid grey;">
  Sorry, your browser does not support canvas.
</canvas>

2. 调整图像平滑设置 #

关闭Canvas的图像平滑功能，避免插值带来的异常：

image.addEventListener("load", (e) => {
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(image, 0, 0, 300, 400);
});

如果需要保留平滑效果，可尝试设置更高的平滑质量：

ctx.imageSmoothingQuality = "high";

3. 手动修正像素数据 #

如果上述方法无效，可读取图像像素数据，手动处理亮像素（示例：将异常高亮的像素替换为周围像素的平均值）：

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 0, 0, 300, 400);
  const imageData = ctx.getImageData(0, 0, 300, 400);
  const data = imageData.data;

  // 遍历所有像素，处理亮像素（以RGB值均大于240为例）
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i+1];
    const b = data[i+2];
    if (r > 240 && g > 240 && b > 240) {
      // 取前后像素的RGB均值（简化处理，可根据实际情况优化）
      data[i] = Math.floor(((data[i-4] || r) + (data[i+4] || r)) / 2);
      data[i+1] = Math.floor(((data[i-3] || g) + (data[i+5] || g)) / 2);
      data[i+2] = Math.floor(((data[i-2] || b) + (data[i+6] || b)) / 2);
    }
  }
  ctx.putImageData(imageData, 0, 0);
});

内容的提问来源于stack exchange，提问作者Joao N Garcia Garcia