从HTML5画布中的图像中删除背景色

Question

我正在尝试从加载到HTML5画布中的照片图像中剥离背景。想象一下类似于绿色屏幕效果的东西。

我使用的是HTML/JS/jQuery

例如，照片的背景将是一个绿色的窗帘。由于光线之类的原因，窗帘上的颜色不会很精确。

我现在要做的就是抓取用户在画布上点击的像素的RGB值。这就被认为是背景。我将该像素的R+G+B相加，以设置被视为背景的内容。

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

这是一个足够好的概念证明，但还不足以做任何事情。

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

干杯!

Answer 1

看看GrabCut algorithm或GrowCut algorithm；前者描述了“使用迭代图切割进行前景提取”，后者描述了“使用细胞自动机进行图像分割”。这两篇论文都将让你更深入地了解一些用于去除背景图像数据的旧算法。如果你能以某种方式用Javascript实现这些算法中的一种，那么我认为你已经大功告成了。

OPENcv computer vision library (用c/c++编写)有很多有效的图像处理方法可供研究。您可以尝试将其中一种OPENcv library's BackgroundSubtractor方法(我认为它部分基于Chris Stauffer and W.E.L Grimson's algorithm)移植到Javascript，然后使用它来分析背景，从而减去它，但我认为它们是基于渐进式视频帧而不是静态图像。

谷歌代码上的js-aruco project已经移植了OPENcv library的一些功能(codebase is here)，所以您可能希望首先在那里寻找一些灵感，然后，如果您觉得勇敢，看看如何编写GrabCut或GrowCut算法