canvas.toDataURL image/png 권장되는 오류 처리 방법

문제 배경:

재생된 동영상의 스크린샷을 찍어야 하는 요구 사항이 발생했습니다. 동영상 태그를 사용하여 동영상이 재생된 후 동영상 재생 영역을 클릭하면 실시간 프레임 사진이 캡처됩니다.

코드는 다음과 같이 매우 간단합니다.

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 중국어 웹사이트에서 관련 기사를 주목하세요!