며칠 전에 본 흥미로운 작은 데모에 대해 설명하겠습니다. 바로 비디오의 온라인 스크린샷입니다. 수정하고 새 기능을 추가한 후의 렌더링은 다음과 같습니다.
정말 간단하지 않나요? 아래에서 방법을 알려드리겠습니다.
그것은 주로 세 가지 주요 기능으로 나누어지며, 첫 번째 기능은 다음과 같습니다.
비디오 링크를 얻고 표시하려면 URL 개체를 사용하십시오.
js의 URL 객체에는 파일(File 객체)의 URL을 얻어와 이를 video 요소의 src 속성에 삽입하여 동영상을 표시할 수 있는 createObjectURL 메소드가 있습니다. 물론 입력 요소를 사용하거나 드래그하는 등 File 개체를 가져오는 방법에는 여러 가지가 있습니다. 전체 코드 조각:
<input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. 파일[0])})물론, 소스 코드에 이렇게 쓴 것은 아니고 단지 여러분께 보여드리기 위해 쓴 것입니다. URL을 보다 구체적으로 사용하려면 이 기사나 MDN을 읽어보세요.
캔버스를 사용하여 비디오 스크린샷을 얻으세요:다음 단계가 핵심 단계이지만 매우 간단합니다. 즉, 캔버스의 drawImage 메서드를 사용하는 것입니다. Elevation 3의 섹션 15.2.6을 보면 drawImage 메서드 사용에 대해 설명되어 있습니다. 매우 자세하게 설명되어 있지만 누락되었습니다. 즉, 비디오 요소를 drawImage 메서드에 전달할 수도 있고 그래픽을 그릴 수 있다는 것입니다. 특정 코드 조각:
var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//원본 이미지의 x, y축 좌표와 크기를 설정하고 대상 이미지의 x, y축 라벨, 크기. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//base64 아이콘을 URL 문자열로 인코딩 var dataUrl = canvas.toDataURL(image/png);// 이미지 삽입 src 속성에 document.createElement('img').src=dataUrl;이미지를 그린 후 캔버스의 toDataURl 메서드를 호출하여 이미지를 base64로 인코딩된 URL로 변환하고 이를 img 요소에 삽입하여 표시할 수 있습니다. 그림과 base64의 관계에 관해 학생들은 이 기사를 읽을 수 있습니다.
애니메이션 효과를 얻으려면:이 애니메이션을 구현하는 주된 원리는 먼저 영상의 원래 위치에 영상과 같은 크기의 큰 그림을 생성하고, 이를 절대 레이아웃(위치:절대)으로 설정하고, 실제로 썸네일이 배치되는 곳에 작은 그림을 생성하는 것입니다. 을 선택하고 보이지 않음(visibility:숨김)으로 설정하면 큰 그림이 왼쪽과 위쪽으로 이동하면서 실제 썸네일이 놓인 위치로 너비와 높이가 줄어들어 애니메이션 효과가 나타납니다. 마지막으로 큰 그림을 삭제하고 작은 그림을 표시합니다. 특정 코드 조각:
function getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft += offsetParent; .offsetTop; offsetParent = offsetParent.offsetParent } 반환 위치;}이 함수는 작은 그림과 뷰포트(뷰포트) 사이의 거리를 가져와 이를 변위 매개변수로 큰 그림에 제공합니다. Elevation 3의 섹션 12.2.3에는 자세한 지침과 대체 getBoundingClientRect 함수가 포함된 거의 동일한 코드가 있습니다. 또한 언급되었으니 자세한 내용은 책을 읽어보시기 바랍니다.
다음 코드는 큰 그림과 작은 그림을 만들고 애니메이션 효과를 얻는 것입니다. 편의와 이해를 돕기 위해 여기서는 JQuery를 사용합니다.
var $imgBig = $(<img/>);//원본 영상인 큰 그림의 초기 위치를 설정합니다. $imgBig.css({ 위치: 절대, 왼쪽: video.offsetLeft, 위쪽: video.offsetTop, 너비: video.offsetWidth+ px, 높이: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//큰 그림의 애니메이션 효과를 얻으려면 작은 그림의 거리 매개변수를 가져옵니다. var offset = getOffset($img[0]);//애니메이션 효과 추가 $imgBig.animate({ 왼쪽: offset.x + px, 위쪽: offset.y + px, 너비: $img.width() + px, 높이: $img.height() + px}, 500, function () { $img.show(); $imgBig.remove();});물론 주요 코드 부분은 여기까지입니다. 물론 구체적인 구현이나 기타 기능에는 아직 보여주지 못한 세부적인 문제가 많이 있으므로, 하나씩 읽어보신 후 자세히 설명하지 않겠습니다. 소스 코드에 대해 질문하세요.
아래는 내 소스 코드 주소입니다. 시도해 볼 수 있습니다.
github의 데모
요약위 내용은 온라인 영상 스크린샷 기능을 구현하기 위해 에디터가 소개해드리는 캔버스와 결합된 영상입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 답변해드리겠습니다. 시간. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!