如何通过图像滤镜让Canvas中显示的A4文档JPG图像文字清晰？

一、先搞定重采样：等比例绘制是核心前提 #

很多时候Canvas里文字模糊，根源是图像被强制拉伸变形。先确保你是等比例缩放绘制，不要让图像的宽高比和Canvas容器不一致。

代码示例：

const img = new Image();
img.src = 'your-document.jpg';
img.onload = () => {
  const canvas = document.getElementById('your-canvas');
  const ctx = canvas.getContext('2d');
  
  // 计算等比例缩放后的尺寸，以Canvas容器大小为基准
  const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
  const drawWidth = img.width * scale;
  const drawHeight = img.height * scale;
  
  // 缩小图像时开启高质量重采样
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
};

如果是放大显示文档（比如A4图像比Canvas小），可以关闭平滑，让文字边缘更锐利：

ctx.imageSmoothingEnabled = false;

二、用Canvas内置滤镜快速增强文字对比度 #

直接利用Canvas的filter属性，组合对比度、亮度和锐化效果，快速提升文字清晰度：

// 在绘制图像前设置滤镜
ctx.filter = 'contrast(1.6) brightness(1.1) sharpen(2)';
ctx.drawImage(img, 0, 0, drawWidth, drawHeight);

• contrast(1.6)：拉大文字和背景的差异，让轮廓更突出
• brightness(1.1)：微调亮度，避免背景过暗或过亮掩盖文字
• sharpen(2)：直接锐化边缘，数值越大锐化程度越高（别超过3，否则会出现噪点）

如果浏览器不支持sharpen，可以用自定义的非锐化蒙版滤镜替代：

ctx.filter = 'contrast(1.6) brightness(1.1) url("#unsharp-mask")';

同时在HTML中添加对应的SVG滤镜：

<svg width="0" height="0">
  <filter id="unsharp-mask">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur"/>
    <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="0" k2="1.5" k3="-0.5" k4="0"/>
  </filter>
</svg>

三、手动像素处理：转灰度+阈值化（文档图像专属优化） #

文档图像的核心是文字和背景的区分，把彩色转成高对比度的黑白图像，能彻底消除噪点，让文字边缘变锐利。直接操作像素数据：

img.onload = () => {
  const canvas = document.getElementById('your-canvas');
  const ctx = canvas.getContext('2d');
  const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
  const drawWidth = img.width * scale;
  const drawHeight = img.height * scale;
  
  // 先绘制原始图像到Canvas
  ctx.drawImage(img, 0, 0, drawWidth, drawHeight);
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, drawWidth, drawHeight);
  const data = imageData.data;
  
  // 遍历每个像素，转灰度+阈值处理
  for (let i = 0; i < data.length; i += 4) {
    // 用加权公式计算灰度值（更符合人眼感知）
    const gray = data[i] * 0.299 + data[i+1] * 0.587 + data[i+2] * 0.114;
    // 阈值可根据图像调整：大于200设为纯白，否则纯黑
    const threshold = gray > 200 ? 255 : 0;
    data[i] = data[i+1] = data[i+2] = threshold;
    data[i+3] = 255; // 保持完全不透明
  }
  
  // 把处理后的像素放回Canvas
  ctx.putImageData(imageData, 0, 0);
};

四、最优组合方案 #

把上面的方法结合起来，效果最佳：

1. 等比例缩放绘制图像（解决重采样模糊）
2. 先应用内置滤镜增强基础对比度
3. 再手动做阈值化处理，转成高对比度黑白图像

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