从HTML5 Canvas中的图像中删除背景颜色

我正试图从加载到HTML5 Canvas中的照片图像中去除背景。 想想绿屏效果。

我正在使用HTML / JS / jQuery

照片的背景将是例如绿色窗帘。 由于照明等原因,窗帘的颜色不会精确。

我现在正在做的是抓取用户在Canvas中点击的像素的RGB值。 那被认为是背景。 我添加该像素的R + G + B来设置被视为背景的东西。

然后,我逐个像素地浏览canvas,检查像素是否接近设置为背景的RGB值(例如,在50以上或以下)。 如果匹配,我将像素更改为canvas内的透明。

这可以很好地作为概念certificate,但不足以做任何事情。

有没有人对背景减法有更好的想法?

干杯!

看看GrabCut算法或GrowCut 算法 ; 前者描述了“使用迭代图切割的前景提取”,后者描述了“通过元胞自动机进行图像分割”。 这两篇论文将使您更深入地了解用于删除背景图像数据的一些旧算法。 如果你能以某种方式在Javascript中实现其中一种算法,那么我认为你就是那里的大部分。

OPENcv计算机视觉库 (用c / c ++编写)有很多高效的图像处理方法可供检查。 您可以尝试将一个OPENcv库的BackgroundSubtractor方法(我认为部分基于Chris Stau ff er和WEL Grimson的算法 ) 移植到Javascript,然后使用它来分析背景并因此减去它,但我认为它们是基于渐进的video帧而不是静态图像。

谷歌代码上的js-aruco项目已经移植了OPENcv库的一些function( 代码库就在这里 ),所以你可能想先找一些灵感,然后,如果你有勇气,看看如何你可以编程GrabCut或GrowCut算法