图像像素处理：如何将文本转为单一黑色、背景转为单一白色？

你的代码仅能生成灰度效果，因为它只是将每个像素的RGB通道设为相同的灰度平均值，没有进行二值化处理——也就是把像素强制转为纯黑或纯白的操作。

要实现纯黑文本、纯白背景的效果，需要添加阈值判断：将灰度值低于阈值的像素设为黑色，高于阈值的设为白色（可根据图像明暗反向调整）。修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <img id="originalImage" src="yourImage.jpg" style="display:none">
  <canvas id="bwImage"></canvas>
  <script>
    var originalImage = document.getElementById("originalImage");
    var bwImage = document.getElementById("bwImage");
    var ctx = bwImage.getContext("2d");

    originalImage.onload = function() {
      bwImage.width = originalImage.width;
      bwImage.height = originalImage.height;
      ctx.drawImage(originalImage, 0, 0);

      var imageData = ctx.getImageData(0, 0, bwImage.width, bwImage.height);
      var data = imageData.data;
      // 二值化阈值，可根据图像实际明暗调整（范围0-255）
      const threshold = 127;

      for (var i = 0; i < data.length; i += 4) {
        // 用符合人眼视觉的公式计算灰度值，比简单平均更准确
        var gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
        // 根据阈值将像素转为纯黑或纯白
        var bwValue = gray < threshold ? 0 : 255;
        data[i]     = bwValue;
        data[i + 1] = bwValue;
        data[i + 2] = bwValue;
      }

      ctx.putImageData(imageData, 0, 0);
    };
  </script>
</body>
</html>

关键说明： #

• 灰度计算：采用0.299R + 0.587G + 0.114B的公式，这是行业通用的亮度计算方式，比简单的RGB平均更符合人眼对颜色的感知，能更准确区分文本和背景。
• 阈值调整：如果测试图像的转换效果不理想，比如文本糊成背景、背景有黑点，可以调整threshold的值：
  • 文本偏浅时，降低阈值（比如设为100）
  • 背景偏暗时，提高阈值（比如设为150）

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