从HTML5画布图像删除背景颜色 [英] Remove background color from image in HTML5 Canvas
问题描述
我试图剥离出后台加载到HTML5画布照片图像。想想有点像一个绿色的画面效果。
I'm trying to strip the background out of a photo image loaded into a HTML5 Canvas. Think of something like a green screen effect.
我使用的HTML / JS / jQuery的
I'm using HTML/JS/jQuery
照片的背景将是，例如，一个绿色的帷幕。颜色不会是精确的，因为在整个照明等类的帷幕。
The background of the photo will be, for example, a green curtain. The color wont be exact across the curtain because of lighting and such like.
我在做什么，现在被抓住了用户点击画布内的像素的RGB值。这则认为是背景。我再补充一点像素设置什么被认为是为背景的R + G + B
What i'm doing right now is grabbing the RGB value of a pixel that the user clicks on within the Canvas. That's then considered to be the background. I add the R+G+B of that pixel to set what is considered as the background.
我再通过画布，逐像素去，检查是否像素接近设置为背景的RGB值（在50说的上方或下方）。如果匹配，我改变像素是画布内是透明的。
I'm then going through the canvas, pixel by pixel, checking if the pixel is close to the RGB value set as the background (say within 50 above or below). If it matches, I change the pixel to be transparent within the canvas.
这工作的很好，作为一个概念证明但不是不够好，做任何事情。
This works well enough as a proof of concept but not well enough to do anything with.
有没有人有背景减除任何更好的想法？
Does anyone have any better ideas on background subtraction?
干杯！
推荐答案
有一个看的 GrabCut算法或 GrowCut算法;前者描述前景提取使用迭代图割，后者，图像分割元胞自动机。这两项文章将会给你一个更深入的了解了一些用于消除背景图像数据较旧的算法。如果你能以某种方式实施在Javascript这些算法之一，那么我认为你是最那里的方式。
Have a look at the GrabCut algorithm or GrowCut algorithm; the former describing 'Foreground Extraction using Iterated Graph Cuts' and the latter, 'Image Segmentation By Cellular Automata'. Both those papers will give you a deeper insight into some of the older algorithms used to remove background image data. If you could somehow implement one of those algorithms in Javascript then I think you're most of the way there.
借助 OpenCV的计算机视觉库（用C / C ++）有大量的高效图像处理的方法来检查。你可以尝试和港口之一<一个href=\"http://docs.opencv.org/modules/video/doc/motion_analysis_and_object_tracking.html#backgroundsubtractormog\"相对=nofollow> OpenCV库的BackgroundSubtractor 方法（我认为这是部分基于的克里斯·斯陶FF ER和WEL Grimson算法）为Javascript，然后用它来分析背景，因此减去它，但我认为他们是基于逐行的视频帧而不是静态图像。
The OPENcv computer vision library (written in c/c++) has plenty of efficient image manipulation methods to examine. You could try and port one of the OPENcv library's BackgroundSubtractor methods (which I believe is partly based on Chris Stauffer and W.E.L Grimson's algorithm) to Javascript and then use that to analyse the background and therefore subtract it, but I think they are based on progressive video frames rather than static images.
在谷歌code的 JS-aruco项目有移植一些 OpenCV库的功能已经（的 codeBase的是这里），所以你可能想先看看有没有一些灵感，然后，如果你'再勇敢的感觉，看看你怎么可以在
The js-aruco project on Google code has ported some of the functionality of the OPENcv library already (codebase is here) so you might want to look there first for some inspiration and then, if you're feeling brave, have a look at how you could program the GrabCut or GrowCut algorithms
这篇关于从HTML5画布图像删除背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
