2012-10-24 4 views
0

HTML5 Canvas에로드 된 사진 이미지에서 배경을 제거하려고합니다. 녹색 화면 효과와 같은 것을 생각해보십시오. 나는 HTML/JS/jQuery를HTML5 Canvas에서 이미지의 배경색을 제거하십시오.

될 사진의 배경, 예를 들어, 녹색 커튼을 사용하고

. 조명 때문에 커튼 전체에 걸쳐 색상이 정확하지 않습니다.

지금 내가하고있는 일은 사용자가 캔버스 내에서 클릭하는 픽셀의 RGB 값을 가져 오는 것입니다. 그런 다음 배경으로 간주됩니다. 그 픽셀의 R + G + B를 추가하여 배경으로 간주되는 것을 설정합니다.

캔버스를 픽셀 단위로 살펴보고 픽셀이 배경으로 설정된 RGB 값에 가까운 지 확인합니다 (위 또는 아래 50). 일치하는 경우 픽셀을 캔버스 내에서 투명하게 변경합니다.

이것은 개념 증명으로는 충분하지만 아무 것도 할 수 없을 정도입니다.

누구든지 배경 빼기에 대해 더 좋은 아이디어가 있습니까?

건배!

+0

JS에서 그런 종류의 일을하는 것은 실패합니다. 성능 측면에서. 서버를 사용하는 것이 좋습니다. – alexandernst

+0

이것은 최적화 문제와 같아서 가지고있는 것과 함께 jsfiddle을 만들 수 있다면 유용 할 것입니다. 사람들은 매개 변수로 놀 수 있습니다. –

+0

@alexandernst 이미지를 서버로 보내는 오버 헤드를 감당할 수 없습니다. 있는 그대로 브라우저에서 빠르게 작동합니다. 색상을 비교하는 더 좋은 방법을 알아야 유사성을 확인해야하므로 색상을 제거해야합니다. 내 현재의 방법은 총 추측이므로 더 나은 방법이 있어야합니다. Asad, 고마워. 내가 살펴볼거야. – Stevie

답변

2

GrabCut algorithm 또는 GrowCut algorithm을 살펴보십시오. 전자는 '반복 그래프를 사용하여 전경 추출'을 설명하고 후자는 '셀러 자동화를 통한 이미지 분할'을 설명합니다. 이 두 논문은 배경 이미지 데이터를 제거하는 데 사용 된 이전 알고리즘에 대한 심층적 인 통찰력을 제공합니다. 어떻게 든 자바 스크립트에서 그 알고리즘 중 하나를 구현할 수 있다면 당신은 거기에있는 대부분의 방법이라고 생각합니다.

OPENcv computer vision library (c/C++로 작성)에는 검사 할 효율적인 이미지 조작 방법이 많이 있습니다. 당신은 시도 할 수있는 하나의 OPENcv library's BackgroundSubtractor (내가 부분적으로는 Chris Stauffer and W.E.L Grimson's algorithm을 기반으로 믿는) 자바 스크립트를 시도하고 배경을 분석하고 따라서 그것을 빼기를 사용하여,하지만 그들은 정적 이미지가 아니라 점진적 비디오 프레임을 기반으로 생각합니다.

구글 코드에 js-aruco project

는 이미 OPENcv library ( codebase is here)의 기능 중 일부를 이식하고있다 그래서 당신은 영감 먼저가보고 싶은 당신은 용감 기분이라면, 어떻게 수를 살펴있을 수 있습니다 GrabCut 또는 GrowCut 알고리즘을 프로그래밍하십시오.

관련 문제