为什么canvas会改变我导入的纯黑白图片的像素颜色？

问题根因 #

该颜色异常由Canvas默认行为导致，核心有两个触发点：

• Canvas 2D上下文默认开启了图像平滑处理，当绘制的图片尺寸和Canvas画布尺寸、绘制目标尺寸不一致时，会自动对像素做插值计算，产生大量过渡灰度色
• Canvas元素的width/height属性和CSS样式的width/height定义不同：前者定义Canvas实际的像素画布尺寸，后者仅控制元素的显示缩放尺寸，若仅设置了CSS宽高，没有和Canvas本身的像素尺寸对齐，绘制时会自动做拉伸缩放，同样会产生插值杂色

修复方案 #

按以下步骤调整代码即可：

1. 绘制图片前先将Canvas的实际像素尺寸和原图尺寸对齐，避免不必要的缩放
2. 手动关闭Canvas的图像平滑功能，禁止插值计算

修改后的代码示例：

class AppComponent {
  /* ... */

  // 调整后的图片渲染逻辑
  ngAfterViewInit() {
    this.context = this.canvas.nativeElement.getContext('2d');

    const image = new Image();
    image.src = 'assets/image.png';

    image.onload = () => {
      if (!this.context) return;
      // 取原图的实际尺寸
      const naturalWidth = image.naturalWidth;
      const naturalHeight = image.naturalHeight;
      // 对齐Canvas实际像素尺寸，不要仅设置CSS宽高
      this.canvas.nativeElement.width = naturalWidth;
      this.canvas.nativeElement.height = naturalHeight;
      // 关闭图像平滑，避免插值产生杂色
      this.context.imageSmoothingEnabled = false;
      
      this.context.globalCompositeOperation = 'source-over';
      // 绘制时尺寸和原图保持一致，不要缩放
      this.context.drawImage(image, 0, 0, naturalWidth, naturalHeight);
    };
  }

  // 颜色统计逻辑无需修改
  calculate() {
    const imageData = this.context?.getImageData(0, 0, this.width, this.height);
    const data = imageData?.data || [];

    const uniqueColors = new Set();

    for (let i = 0; i < data?.length; i += 4) {
      const [red, green, blue, alpha] = data.slice(i, i + 4);
      const color = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
      uniqueColors.add(color);
    }

    this.uniqueColors = String(uniqueColors.size);
  }
}

调整后再统计颜色，即可得到仅黑白两种的预期结果。

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