문제 배경:
재생된 동영상의 스크린샷을 찍어야 하는 요구 사항이 발생했습니다. 동영상 태그를 사용하여 동영상이 재생된 후 동영상 재생 영역을 클릭하면 실시간 프레임 사진이 캡처됩니다.
코드는 다음과 같이 매우 간단합니다.
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');
function snapshot() {
ctx.drawImage(video,0,0);
img.src = canvas.toDataURL('image/png');
}
video.addEventListener('click', snapshot, false);문제 팁:
잡히지 않은 보안 오류: 'HTMLCanvasElement'에서 'toDataURL' 실행 실패: 오염된 캔버스를 내보낼 수 없습니다. .
검토 및 분석 결과 이는 실제로 동영상 파일이 위치한 도메인과 사진 및 페이지가 위치한 도메인이 다르기 때문에 크로스 도메인이 발생하는 것으로 확인되었습니다. 전송 문제.
해결책:
동영상 파일을 페이지 도메인에 넣으세요.
더 많은 canvas.toDataURL 이미지/png 및 권장 오류 처리 방법을 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
