Canvas와 html5를 활용한 영상 스크린샷 기능 구현 예시

이때 캔버스 공부를 하다가 문득 영상의 스크린샷을 찍고 그 사진을 뽑아서 이모티콘을 만드는 기능을 만들어볼까 하는 생각이 들었어요, 하하하하하하~~
제작방법 :
1 .페이지에 비디오 로드
캔버스를 사용하여 스크린샷 기능을 만들 때 먼저 비디오가 페이지에 로드되었는지 확인해야 편리하게 조작할 수 있습니다.

<video loop controls id="testmp4" width="500" height="400" >    

<source src="test.mp4" type="video/mp4">  

<source src="test.webm" type="video/webm">   

<source src="test.ogg" type="video/ogg">

</video>

내 기사 "html5 및 video"에서 언급했듯이 브라우저는 비디오 미리 로드 진행률 및 로드 이벤트를 다르게 지원합니다. 이는 비디오 재생 및 기타 이벤트 트리거에 영향을 미칩니다. 그래서 여기서는 js를 사용하여 비디오를 소개하는 비디오를 구성합니다.
이런 방식으로 동영상을 소개할 때는 주의하세요. 여러 소스를 소개할 수 없으므로 먼저 브라우저의 동영상 형식 지원 여부를 확인해야 합니다.
1.1 지원되는 형식을 확인하려면 동영상의 canPlayType() 메서드를 사용하세요.
canPlayType() 메서드는 동영상의 형식인 매개변수를 전달해야 합니다.
공통. 값:

video/ogg;
　　　　video/mp4;
　　　　video/webm;

또는 인코더 포함:

　　　　video/ogg;codecs="theora,vorbis"
　　　　video/mp4;codecs="avc1.4D401E, mp4a.40.2"
　　　　video/webm;codesc="vp8.0, vorbis"

반환 값: 웹 페이지의 지원 수준을 나타냅니다. "아마도" - 지원할 가능성이 가장 높음(다음 경우에만 이 값이 반환됨) 입력 값에 인코더가 있음), "아마도" " - 지원될 수 있음, "" - (빈 문자열)은 지원되지 않음,

function videoType(video){

    var returnType='';

    if(video.canPlayType('video/mp4')=='probably'||video.canPlayType('video/mp4')=='maybe'){

    　　returnType= 'mp4';

    }else if(video.canPlayType(&#39;video/ogg&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/ogg&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;ogg&#39;; 　　 
    <br>　　 
    }else if(video.canPlayType(&#39;video/webm&#39;)==&#39;probably&#39;||video.canPlayType(&#39;video/webm&#39;)==&#39;maybe&#39;){<br> 　　　　
    returnType= &#39;webm&#39;; 　　 <br>　　 }<br>　　 return returnType; 

}

이 함수는 브라우저에서 비디오에 대해 지원하는 형식을 결정할 수 있습니다. .
1.2 js를 사용하여 동영상 태그를 동적으로 로드
브라우저의 지원 형식을 확인한 후 Chrome을 사용하고 있으므로 내 브라우저는 mp4 형식의 동영상을 지원하고 그런 다음 동적으로 동영상을 만듭니다. 꼬리표.

var videoElem;

var videop;

function createVideo(){

     videoElem=document.createElement("video");//创建video

     videop=document.getElementById("videopanel");//获取video的外层容器

     videop.appendChild(videoElem);

     var vtype=videoType(videoElem);//判断浏览器支持的格式

     if(vtype==""){

        videop.innerHtml('不支持video')

    }else{

        videoElem.setAttribute('src',"text."+vtype);
    }
}

여기서는 스크린샷 기능을 만들고 싶기 때문에 간단한 영상에는 스크린샷 인터페이스가 없어서 캔버스에 복사해서 캔버스에서 영상을 재생해야 하므로 여기서 먼저 비디오가 숨겨져 있습니다(표시:없음).
2. 캔버스를 사용하여 비디오 복사
이제 비디오가 브라우저에서 재생되었으므로 먼저 캔버스를 만든 다음 캔버스 컨텍스트를 가져옵니다. . 이것은 말하지 않을 것입니다. 캔버스에 비디오를 그리는 방법, 여기서는 함수를 사용해야 합니다. drawImage 함수 사용법

1.drawImage(img,x,y): 캔버스의 (x,y) 위치에 img를 그립니다.

2.drawImage(img,x, y , width, height): 캔버스의 (x, y) 위치에 너비와 높이를 갖는 img를 그립니다.

3.drawImage(img,sx,sy,swidth,sheight,x,y , width, height): 캔버스의 (x, y) 위치에서 (sx, sy) 위치에 있는 img의 너비와 높이를 스크린샷으로 그립니다. 이미지를 그릴 때 너비와 높이에 맞게 크기를 조정해야 합니다. 캔버스.

위는 drawImage의 사용법입니다. 이 기능은 매우 강력합니다.

스크린샷 촬영으로 돌아가서 이제 브라우저에서 canvas-contextVideo를 생성한 다음 여기에 비디오를 그립니다.

contextVideo.drawImage(videoElem,0,0);

그러면 그림이 그려지는 것을 볼 수 있습니다. 캔버스에 있지만 영상은 계속 바뀌기 때문에 영상을 소스로 하여 계속해서 그림을 그리려면 setInterval 함수를 사용해야 합니다.

setInterval(function(){<br>    contextVideo,drawImage(videoElem,0,0);<br>},100)

여기서 시간 간격의 크기는 비디오 재생이 정지되는지 여부에 영향을 미칩니다. ​

이 시점에서 표시를 위해 비디오를 캔버스로 옮겼습니다. 다음으로 스크린샷을 만드세요.

3. 캔버스 패널을 표시하기 위한 스크린샷을 만듭니다.

여기서 페이지에 다른 캔버스(contextImg)를 그린 다음 drawImage 메서드를 다시 사용하여 스크린샷.

contextImg.drawImage(canvasVideo,0,0,canvasVideo.width,canvasVideo.height);

이 코드는 첫 번째 캔버스를 두 번째 캔버스에 그립니다.
4. 스크린샷 버튼 만들기
버튼을 만든 후 클릭 이벤트를 바인딩하면 이전 단계의 함수가 호출되어 스크린샷을 만들 수 있습니다.
사진을 촬영한 후 사진을 마우스 오른쪽 버튼으로 클릭하여 저장한 다음 PS로 가져와 이모티콘 패키지를 만들 수 있습니다.

위 내용은 Canvas와 html5로 구현한 동영상 스크린샷 기능 예시 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!