Firefox drawImage tot 캔버스 오류 : IndexSizeError : 색인 또는 크기가 음수이거나 허용 된 양보다 많습니다.

Question

Chrome에서 사용하던 적이 있었지만 Firefox로 플러그인을 테스트해야했습니다. 비디오 요소를 캡처하여 캔버스에 그려야합니다. Chrome에서는 모든 것이 잘 작동하지만 Firefox에서는 아직 해결할 수없는이 성가신 오류가 발생합니다.

IndexSizeError: Index or size is negative or greater than the allowed amount 

나는 캔버스 $("#output")[0].getContext('2d') 비디오 $("#video")[0]에 그리는 코드의 다음 줄을 사용하고 있습니다 :

outputCtx.drawImage(video, 0,0, video.width, video.height, 0, 0, 1815, 1358); 

나는에 Video.width 및 video.height 값에 오류가 발생합니다. 내가 크롬에서 잘 작동하지만, 파이어 폭스에서 오류가 제공하는 JSFiddle했습니다 : 대신 이러한 속성을 사용하는 http://jsfiddle.net/ronnyrr/KD2bu/

Answer 1

시도 :

outputCtx.drawImage(video, 0,0, video.videoWidth, video.videoWeight, 
        0, 0, 1815, 1358); 

소스 사각형은 항상 소스 비트 맵 내에 있어야합니다. 오류 메시지는 매개 변수 중 하나가 바깥이거나 0 또는 음수 일 때 발생합니다.

Firefox에서는 너비가 실제 비디오 크기를 반영하지 않을 수 있습니다. videoWidth/높이 속성이나 최악의 경우를보십시오 이에 대한 것은 그들을 결합 :

outputCtx.drawImage(video, 0,0, 
        video.videoWidth||video.width, 
        video.videoHeight||video.height, 
        0, 0, 1815, 1358); 

희망이 도움이!