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

时间:2012-10-24 07:48:31

标签: javascript jquery html5 background

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

我正在使用HTML / JS / jQuery

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

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

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

这足以作为概念证明,但不足以做任何事情。

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

干杯!

1 个答案:

答案 0 :(得分:2)

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

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

Google代码上的js-aruco project已移植了OPENcv library已有的一些功能(codebase is here),因此您可能希望首先查看其中的某些灵感,然后,如果您'感到勇敢,看看你如何编程GrabCutGrowCut算法