CSS无降采样灰度化：打印像素化问题如何解决？

这个问题我之前帮不少开发者排查过，本质上是浏览器的屏幕渲染和打印渲染走了不同的处理路径——CSS滤镜在屏幕上是实时渲染，但打印时引擎会对应用滤镜的图片做低分辨率重采样，导致像素化。下面给你几个靠谱的解决方案，按优先级排序：

1. 准备灰度图，打印时直接替换（最稳妥） #

绕开CSS滤镜的渲染问题是最直接的办法。你可以提前用PS、批量处理工具（比如ImageMagick）生成图片的灰度版本，然后通过打印媒体查询切换显示：

/* 屏幕端显示彩色图 */
.color-img {
  display: block;
}
.grayscale-img {
  display: none;
}

/* 打印时切换为灰度图 */
@media print {
  .color-img {
    display: none;
  }
  .grayscale-img {
    display: block;
  }
}

对应的HTML结构：

<img src="color-photo.jpg" alt="彩色照片" class="color-img">
<img src="grayscale-photo.jpg" alt="灰度照片" class="grayscale-img">

这个方法的优势是完全避免滤镜渲染的兼容性问题，打印出来的图片清晰度和原图一致，唯一的小成本是额外准备一套灰度图，不过现在批量处理工具很多，5分钟就能搞定一批图。

2. 调整打印时的CSS渲染属性 #

如果没法准备灰度图，可以试试强制浏览器在打印时保留滤镜的高清渲染。添加以下CSS规则：

@media print {
  img.grayscale {
    filter: grayscale(100%);
    /* 强制浏览器保留颜色/滤镜效果 */
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    /* 优化图片渲染清晰度 */
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    /* 确保图片尺寸正确，避免拉伸 */
    max-width: 100%;
    height: auto;
  }
}

注意：这个方案的兼容性取决于浏览器，Chrome和Edge的支持度较好，Firefox可能需要额外测试。如果是背景图，记得加上background-size: cover/contain和background-repeat: no-repeat，避免背景图拉伸变形。

3. 用Canvas预先转换为灰度图（动态场景适用） #

如果你的图片是动态加载或者需要实时转换（比如用户上传的图片），可以用Canvas提前把彩色图转换成灰度位图，打印时直接渲染Canvas：

// 确保图片加载完成后再处理
document.getElementById('color-image').addEventListener('load', function() {
  const colorImg = this;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 匹配图片的原始尺寸
  canvas.width = colorImg.naturalWidth;
  canvas.height = colorImg.naturalHeight;

  // 绘制图片并应用灰度滤镜
  ctx.filter = 'grayscale(100%)';
  ctx.drawImage(colorImg, 0, 0);

  // 替换原图片
  colorImg.style.display = 'none';
  canvas.id = 'grayscale-canvas';
  colorImg.parentNode.appendChild(canvas);

  // 打印完成后还原原图片（可选）
  window.addEventListener('afterprint', () => {
    colorImg.style.display = 'block';
    canvas.remove();
  });
});

这个方法相当于提前把滤镜效果“bake”到图片里，打印时浏览器只需要渲染生成的位图，不会触发滤镜的重采样问题，适合动态场景，但要注意处理图片跨域的问题（如果图片来自外部域名，需要服务器开启CORS）。

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