javascript - 自动调整亮度/对比度以读取图像中的文本

我想知道是否有人可以向我指出正确的方向，以使用javascript自动调整从手机摄像头拍摄的图像的亮度/对比度，从而使从图像中读取文本更加容易。

感谢任何帮助，

非常感谢。

最佳答案

要自动调整图像，我们可以使用从图像生成的直方图，然后使用阈值找到黑点/白点，以将像素值缩放到相对两端的最大值。

在HTML5中，我们需要使用canvas元素才能读取像素信息。

建立直方图

直方图是图像中最能代表其值的概览。对于亮度对比，我们将对亮度值（像素的感知亮度）感兴趣。


亮度直方图示例

要计算亮度值，我们可以使用REC.709（建议使用AKA BT.709，此处使用）或REC.601公式。

Y = 0.299 * R + 0.587 * G + 0.114 * B

我们需要将其转换为整数（iluma = Math.round(luma);），否则将很难建立基于整数值[0，255]进行存储的直方图（请参见下面的示例代码）。

确定使用哪个范围的策略可能会有所不同，但为简单起见，我们可以基于两端像素的最小表示量选择阈值策略。


红线显示示例阈值

为了根据阈值找到最暗的颜色，我们将从左到右扫描，当我们得到一个高于阈值的亮度值时，将其用作最小值。如果我们到达中心（或什至只有33％），我们可能会中止并默认为0。

对于最亮的，我们将执行相同的操作，但是从右到左，如果未找到阈值，则默认为255。

当然，您可以为每个端点使用不同的阈值-在找到适合自己情况的东西之前，都需要反复尝试这些阈值。

现在，我们应该有两个表示最小-最大范围的值：


基于阈值的最小-最大范围

缩放一般亮度水平

首先根据最小-最大范围计算我们需要使用的比例因子：

scale = 255 / (max - min) * 2

我们将始终从每个分量中减去min，即使这意味着它将进行裁剪（如果
我们对每个像素中的每个分量（0夹和比例）执行此操作：

component = max(0, component - min) * scale

当图像数据放回原处时，对比度应基于给定的阈值最大。

提示

您不必使用整个图像位图来分析直方图。如果您处理大型图像源，则可以缩小为较小的图像-您不需要太多，因为我们关注的是最亮/最暗的区域，而不是单个像素。

您可以使用自身的混合模式（例如multiply，lighten，hard-light / soft-light等）来增亮图像并添加对比度，（
例

这在显示上述技术的缓冲区上起作用。存在更复杂和准确的方法，但这是概念验证（根据CC-3.0-by-sa, attribution required许可）给出的。

它以10％的阈值开始。使用滑块使用阈值查看结果差异。阈值可以通过除此处所示之外的其他方法来计算。实验！

使用整页运行代码段-

var ctx = c.getContext("2d"),
    img = new Image;  // some demo image

img.crossOrigin ="";  // needed for demo
img.onload = setup;
img.src = "//i.imgur.com/VtNwHbU.jpg";

function setup() {
  // set canvas size based on image
  c.width = this.width;
  c.height = this.height;

  // draw in image to canvas
  ctx.drawImage(this, 0, 0);

  // keep the original for comparsion and for demo
  org.src = c.toDataURL();

  process(this, +tv.value);
}

function process(img, thold) {   //thold = % of hist max

  var width = img.width, height = img.height,
      idata, data,
      i, min = -1, max = -1,             // to find min-max
      maxH = 0,                          // to find scale of histogram
      scale,
      hgram = new Uint32Array(width);    // histogram buffer (or use Float32)

  // get image data
  idata = ctx.getImageData(0, 0, img.width, img.height); // needed for later
  data = idata.data;  // the bitmap itself

  // get lumas and build histogram
  for(i = 0; i < data.length; i += 4) {
    var luma = Math.round(rgb2luma(data, i));
    hgram[luma]++;   // add to the luma bar (and why we need an integer)
  }

  // find tallest bar so we can use that to scale threshold
  for(i = 0; i < width; i++) {
     if (hgram[i] > maxH) maxH = hgram[i];
  }

  // use that for threshold
  thold *= maxH;

  // find min value
  for(i = 0; i < width * 0.5; i++) {
    if (hgram[i] > thold) {
      min = i;
      break;
    }
  }
  if (min < 0) min = 0;             // not found, set to default 0

  // find max value
  for(i = width - 1; i > width * 0.5; i--) {
    if (hgram[i] > thold) {
      max = i;
      break;
    }
  }
  if (max < 0) max = 255;           // not found, set to default 255

  scale = 255 / (max - min) * 2;    // x2 compensates (play with value)
  out.innerHTML = "Min: " + min + " Max: " + max +
    " Scale: " + scale.toFixed(1) + "x";

  // scale all pixels
  for(i = 0; i < data.length; i += 4) {
    data[i  ] = Math.max(0, data[i] - min) * scale;
    data[i+1] = Math.max(0, data[i+1] - min) * scale;
    data[i+2] = Math.max(0, data[i+2] - min) * scale;
  }

  ctx.putImageData(idata, 0, 0)
}

tv.oninput = function() {
  v.innerHTML = (tv.value * 100).toFixed(0) + "%";
  ctx.drawImage(img, 0, 0);
  process(img, +tv.value)
};

function rgb2luma(px, pos) {
  return px[pos] * 0.299 + px[pos+1] * 0.587 + px[pos+2] * 0.114
}

<label>Threshold:
<input id=tv type=range min=0 max=1 step= 0.01 value=0.1></label>
<span id=v>10%</span><br>
<canvas id=c></canvas><br>
<div id=out></div>
<h3>Original:</h3>
<img id=org>

关于javascript - 自动调整亮度/对比度以读取图像中的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37986669/