캔버스 요소를 사용하여 웹 카메라 또는 기타 편집 속성에 필터 추가

오늘은 웹 카메라의 비디오에 필터를 추가하거나 캔버스 html 요소로 비디오를 편집하는 방법을 보여드리고자 합니다.

가장 먼저 해야 할 일은 비디오 요소에 웹 카메라를 표시한 다음 캔버스 요소에서 비디오 요소를 프레임 단위로 보는 것입니다.
방법에 대한 기사를 이미 작성했으므로 거기서부터 코딩을 시작하겠습니다.

먼저 사용 가능한 필터가 있는 드롭다운을 추가합니다. 캔버스 컨텍스트에 사용할 수 있는 모든 필터가 여기에 있습니다mdn.

index.html에 이 요소 블록을 추가합니다.

<div class="dropdown" id="filterselect">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                data-bs-toggle="dropdown" aria-expanded="false">
                Filter
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                <li><a class="dropdown-item"  value="none">No filter</a></li>
                <li><a class="dropdown-item"  value="blur(8px)" >Blur</a></li>
                <li><a class="dropdown-item"   value="contrast(50%)" >Contrast</a></li>
                <li><a class="dropdown-item" value="grayscale(100%)" >Grayscale</a></li>
                <li><a class="dropdown-item" value="sepia(100%)" >Sepia</a></li>
            </ul>
</div>

사용 가능한 모든 필터를 사용하지 않고 흐림, 세피아, 대비 및 회색조만 사용합니다.

다음으로 index.js에 이벤트 리스너를 추가해 보겠습니다.

var filter=''
filterselect.addEventListener('click', (event) => {
    if(event.target.getAttribute('value')){
        filter=event.target.getAttribute('value')
    }
});

코드 설명:
필터 변수를 정의하여 컨텍스트 객체의 필터 속성에 할당합니다. 그런 다음 값 속성이 필터 변수에 지정됩니다.

다음 단계는 컨텍스트에 필터를 적용하는 것입니다.
drawimage 함수에 ctx.filter=filter를 추가합니다.

function drawImage(video) {
    ctx.drawImage(video, 0, 0, canvaselement.width, canvaselement.height);
    ctx.filter = filter
}

캔버스 비디오에 텍스트를 추가할 수도 있습니다.

먼저 input.html 요소에 입력을 추가하여 텍스트를 동적으로 변경할 수 있습니다.

<label for="exampleInput" class="form-label">Text</label>
<input class="form-control" id="exampleInput">
<br>

다음과 같이 index.js를 편집합니다.

var canvastext=''
function drawImage(video) {
    ctx.drawImage(video, 0, 0, canvaselement.width, canvaselement.height);
    ctx.filter = filter
    ctx.font = "50px Arial";
    ctx.fillText(canvastext, 50, 50);
}


Then add input event listener on input element:

var canvastextinput=document.querySelector("#canvastext")
canvastextinput.addEventListener('input',(event=>{
canvastext=event.target.value
}))
`
최종 파일은 다음과 같습니다.

index.html