HTML5 Canvas에로드 된 사진 이미지에서 배경을 제거하려고합니다. 녹색 화면 효과와 같은 것을 생각해보십시오. 나는 HTML/JS/jQuery를HTML5 Canvas에서 이미지의 배경색을 제거하십시오.
될 사진의 배경, 예를 들어, 녹색 커튼을 사용하고
. 조명 때문에 커튼 전체에 걸쳐 색상이 정확하지 않습니다.
지금 내가하고있는 일은 사용자가 캔버스 내에서 클릭하는 픽셀의 RGB 값을 가져 오는 것입니다. 그런 다음 배경으로 간주됩니다. 그 픽셀의 R + G + B를 추가하여 배경으로 간주되는 것을 설정합니다.
캔버스를 픽셀 단위로 살펴보고 픽셀이 배경으로 설정된 RGB 값에 가까운 지 확인합니다 (위 또는 아래 50). 일치하는 경우 픽셀을 캔버스 내에서 투명하게 변경합니다.
이것은 개념 증명으로는 충분하지만 아무 것도 할 수 없을 정도입니다.
누구든지 배경 빼기에 대해 더 좋은 아이디어가 있습니까?
건배!
JS에서 그런 종류의 일을하는 것은 실패합니다. 성능 측면에서. 서버를 사용하는 것이 좋습니다. – alexandernst
이것은 최적화 문제와 같아서 가지고있는 것과 함께 jsfiddle을 만들 수 있다면 유용 할 것입니다. 사람들은 매개 변수로 놀 수 있습니다. –
@alexandernst 이미지를 서버로 보내는 오버 헤드를 감당할 수 없습니다. 있는 그대로 브라우저에서 빠르게 작동합니다. 색상을 비교하는 더 좋은 방법을 알아야 유사성을 확인해야하므로 색상을 제거해야합니다. 내 현재의 방법은 총 추측이므로 더 나은 방법이 있어야합니다. Asad, 고마워. 내가 살펴볼거야. – Stevie