JavaScript를 사용하여 그린 스크린 알고리즘 구현

녹색 배경 이미지가 변경되었으며 녹색을 사용한 효과나 다른 이미지로 대체되었습니다. 크로마 키 알고리즘이라고도 하는 화면 알고리즘입니다. 한마디로 우리가 하는 일은 전방 이미지의 모든 녹색 픽셀을 후방 이미지의 일치하는 픽셀과 교환합니다. 배경 그림.

또한 출력 이미지의 크기는 출력 이미지의 크기와 일치해야 한다는 점을 기억해야 합니다. 앞으로 이미지. 다음 단계에서는 앞쪽 이미지의 픽셀을 새 이미지로 복사합니다. 영상. 녹색 픽셀을 복사하는 대신 배경 이미지에서 일치하는 픽셀을 사용합니다.

다음을 적용하기 전에 다음 소스 파일을 HTML 코드에 포함시키는 것을 잊지 마세요. 코드 -

으아아아

이 알고리즘을 구현하는 데 필요한 JavaScript 코드는 아래와 같습니다. 사용하려면 생성해야 합니다. 자신만의 HTML 코드를 작성하세요.

HTML 소스 코드

이 HTML 코드를 HTML 문서의 요소에 추가해야 합니다.

으아아아

CSS 소스 코드

다음으로 HTML 문서의 CSS 코드

으아아아

자바스크립트 소스 코드

HTML 문서의 <script> 태그에 다음 JavaScript 코드를 추가해야 합니다</script>

으아아아

예

이제 다음 코드에서 전체 코드와 출력을 확인해 보겠습니다.

으아아아

이미지를 추가하지 않고 이 출력 화면을 볼 수 있습니다.

다음으로 "첫 번째 이미지"와 "배경 이미지" 이미지를 추가하면 이 출력 화면이 표시됩니다.

이제 "이미지 병합" 버튼을 클릭하면 최종 출력이 표시됩니다. 두 사진 모두 그 조합은 아래와 같습니다.

두 개의 이미지가 알고리즘의 입력으로 사용됩니다. 첫 번째는 배경이 있는 첫 번째 이미지입니다. 녹색, 두 번째는 녹색 대신 사용해야 하는 배경 이미지입니다. 배경.

JavaScript는 두 개의 이미지를 입력으로 받은 후 결합하므로 지연이 발생합니다. 이미지는 정방향 이미지의 녹색 배경을 대체합니다. 친환경을 구현하기 위해서는 스크리닝 알고리즘, 코드는 위에 제공됩니다.

위 내용은 JavaScript를 사용하여 그린 스크린 알고리즘 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!