javascript - HTML5 Canvas 图像分割

Question

我正在尝试从图像中移除背景(墙壁)的白色/灰色像素，以便留下前景(在我的例子中是一只手)。

我尝试操纵 Canvas 像素，但由于阴影或背景中的其他不一致，前景提取不是很好。我什至尝试使用绿色背景，但它并没有提高性能。

for (i = 0; i < imgData.width * imgData.height * 4; i += 4) {
    var r = imgDataNormal.data[i + 0];
    var g = imgDataNormal.data[i + 1];
    var b = imgDataNormal.data[i + 2];
    var a = imgDataNormal.data[i + 3];
    // compare rgb levels for green and set alphachannel to 0;
    selectedR = *a value 0 - 255*
    selectedG = *a value 0 - 255*
    selectedB = *a value 0 - 255*
    if (r <= selectedR || g >= selectedG || b <= selectedB) {
        a = 0;
    }
}

是否有任何复杂的方法或库可以使图像的背景透明？

Answer 1

将像素从 RGB 转换为 HSL，然后对像素运行阈值过滤器以移除饱和度小于 0.12 的任何内容(通过将像素的 alpha 设置为完全透明)(测量饱和度0..1 的比例 - 该值是通过反复试验找到的)。

JavaScript

function rgbToHsl( r, g, b ){
  r /= 255, g /= 255, b /= 255;
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if(max == min){
      h = s = 0; // achromatic
  }else{
      var d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch(max){
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
  }
  return [h, s, l];
}

function thresholdHsl(pixels,lower,upper){
  var d = pixels.data;
   var createTest = function( lower, upper ){
     return lower <= upper
            ? function(v){ return lower <= v && v <= upper; }
            : function(v){ return lower <= v || v <= upper; };
   }
   var h = createTest( lower[0], upper[0] );
   var s = createTest( lower[1], upper[1] );
   var l = createTest( lower[2], upper[2] );

  for (var i=0; i<d.length; i+=4) {
   var hsl = rgbToHsl( d[i], d[i+1], d[i+2] );
   if ( !h(hsl[0]) || !s(hsl[1]) || !l(hsl[2]) ){
     d[i+3] = 0;
   }
  }
}

var img = new Image();

img.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var ctx    = canvas.getContext('2d');
  ctx.drawImage(img,0,0);
  var pixels = ctx.getImageData(0,0,canvas.width,canvas.height);
  thresholdHsl(pixels,[0,0.12,0],[1,1,1]);
  ctx.putImageData(pixels, 0, 0);
};
img.src = 'Hand.png';

HTML

<canvas id="myCanvas" width="638" height="475"></canvas>

输出

可以通过去除图片中的噪声以尝试清理边缘来进一步改进。