canvas.toDataURL 이미지/png 오류 처리 방법

이번에는 canvas.toDataURL 이미지/png 오류 보고서와 이를 처리하는 방법, 그리고 canvas.toDataURL 이미지/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);

문제 팁:

Uncaught SecurityError: 'HTMLCanvasElement'에서 'toDataURL'을 실행하지 못했습니다: 오염된 캔버스를 내보낼 수 없습니다.

검토 및 ​​분석 후 다음과 같은 사실을 발견했습니다. 실제로는 동영상 파일 때문입니다. 이미지가 있는 도메인과 페이지가 있는 도메인이 달라서 도메인 간 전송 문제가 발생합니다.

해결책:

비디오 파일을 페이지 도메인 아래에 넣으세요.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

모바일 웹 페이지 콘텐츠를 적응형으로 만드는 방법

테이블 테이블의 콘텐츠 오버플로를 처리하는 방법

텍스트 영역의 동적 남은 단어 수를 얻는 방법

위 내용은 canvas.toDataURL 이미지/png 오류 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!