p5.js图像直方图均衡

Question

使用p5.js很容易实现两幅图像的blend()，这很好，但我希望能够平衡结果混合图像的直方图。类似于-equalize in ImageMagick。有人知道如何在p5.js中这样做吗？

Answer 1

你能做到的，当然。Algo:对于每个通道，计算累积归一化直方图乘以该通道中的最大值--这将是您在给定旧值的通道中的新像素值。

我阅读了GeeksforGeeks门户中的algo描述，并将其移植到p5.js，代码：

let img
let mod

// helpers
function getMappings() {
 hists = [[], [], []];
 newlevels = [[], [], []];
 maxval = [-1, -1, -1];
 // RGB histograms & maximum pixel values
 for (let i = 0; i < img.width; i++) {
  for (let j = 0; j < img.height; j++) {
    let c = img.get(i, j);
    hists[0][c[0]] = (hists[0][c[0]] || 0) + 1;
    hists[1][c[1]] = (hists[1][c[1]] || 0) + 1;
    hists[2][c[2]] = (hists[2][c[2]] || 0) + 1;
    for (let ch=0; ch < 3; ch++) {
      if (c[ch] > maxval[ch]) {
         maxval[ch] = c[ch];
      }
    }
  }
 }
 // New intensity levels based on cumulative, normalized histograms
 for (let hi = 0; hi < 3; hi++) {
   let acc = 0;
   for (let lev=0; lev < 256; lev++) {
      acc += hists[hi][lev];
      newlevels[hi][lev] = Math.round(maxval[hi]*acc/(img.width*img.height));
   }
 }
 return newlevels;
}

function equalizeHistograms() {
  let map = getMappings();
  for (let i = 0; i < mod.width; i++) {
   for (let j = 0; j < mod.height; j++) {
     let c = img.get(i, j);
     let newcol = color(map[0][c[0]], map[1][c[1]], map[2][c[2]]);
     mod.set(i, j, newcol);
   }
  }
  mod.updatePixels();
}

// system functions

function preload() {
  img = loadImage('https://i.imgur.com/00HxCYr.jpg');
  mod = createImage(200, 140);
}

function setup() {
  img.loadPixels();
  mod.loadPixels();
  createCanvas(250, 400);
  equalizeHistograms();
}

function draw() {
  image(img,0,0);
  image(mod,0,140);
}

演示