javascript - HTML5 Canvas image segmentation -
i'm trying remove white/gray pixels of background (a wall) image foreground (a hand in case) should left.
i tried manipulating canvas pixels foreground extraction not nice because of shadow or other inconsistencies in background. tried green colored background doesn't enhance performance.
for (i = 0; < imgdata.width * imgdata.height * 4; += 4) { var r = imgdatanormal.data[i + 0]; var g = imgdatanormal.data[i + 1]; var b = imgdatanormal.data[i + 2]; var = imgdatanormal.data[i + 3]; // compare rgb levels green , set alphachannel 0; selectedr = *a value 0 - 255* selectedg = *a value 0 - 255* selectedb = *a value 0 - 255* if (r <= selectedr || g >= selectedg || b <= selectedb) { = 0; } }
is there sophisticated method or library make background of image transparent?
there few mistakes in code :
- the last line
a = 0
nothing changing local variable. have modify directly in array - after that, see result, have push pixel array context
- since need (in example) check white/gray background (
rgb(255, 255, 255)
), need check if value of pixel superior, not inferior. , usingand
operator instead ofor
allows here filter bigger part of shadow (which gray every colour component has same value) without removing hand itself, more coloured.
here example :
var imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); (i = 0; < imgdata.width * imgdata.height * 4; += 4) { var r = imgdata.data[i + 0]; var g = imgdata.data[i + 1]; var b = imgdata.data[i + 2]; var = imgdata.data[i + 3]; // compare rgb levels green , set alphachannel 0; selectedr = 105; selectedg = 105; selectedb = 105; if (r >= selectedr && g >= selectedg && b >= selectedb) { imgdata.data[i + 3] = 0; } } context.putimagedata(imgdata, 0, 0);
that still isn't perfect because of shadow, works.
Comments
Post a Comment