Canvas 및 DrawImage를 사용하여 저속 비디오를 90 도로 표시하려고 시도했습니다.

회전 된 카메라 비디오를 초당 2 프레임의 속도로 표시하려고합니다. 다음 코드는 90도 회전 된 240 x 320 이미지를 표시합니다. 브라우저를 새로 고침하지 않으면 이미지가 업데이트되지 않습니다. 변경되는 소스는 cam_1.jpg입니다. 일단 DrawImage에 src 이미지가 있으면 업데이트를 찾습니다.Canvas 및 DrawImage를 사용하여 저속 비디오를 90 도로 표시하려고 시도했습니다.

아직 배우지 못한 내용은 무엇입니까? 시간과 전문성에 감사드립니다.

<title>CamDisplay</title></head><body> 
<canvas height="320" width="240"></canvas> 
<script type="text/javascript" charset="utf-8"> 
    var cam = new Image; 
    window.onload = function(){ 
     var c = document.getElementsByTagName('canvas')[0]; 
     var ctx = c.getContext('2d'); 
     setInterval(function(){ 
      ctx.save(); 
      ctx.clearRect(0, 0, 240, 320); 
      ctx.translate(240, 0); 

      cam.src = 'cam_1.jpg?uniq='+Math.random(); 

      ctx.rotate(1.57); 
      ctx.drawImage(cam, 0, 0); 
          ctx.restore(); 
     },500); 
    }; 
</script> 
</body> 
</html>

출처

2012-02-04 Frank

이미지를로드하는 데 시간이 걸리지 않습니다. 시도해보십시오.

var cam = new Image; 
var c = document.getElementsByTagName('canvas')[0]; 
var ctx = c.getContext('2d'); 

cam.onload = function() { 
     ctx.save(); 
     ctx.clearRect(0, 0, 240, 320); 
     ctx.translate(240, 0); 
     ctx.rotate(1.57); 
     ctx.drawImage(this, 0, 0); 
     ctx.restore(); 
    } 

window.onload = function(){ 
    setInterval(function(){ 
     cam.src = 'cam_1.jpg?uniq='+Math.random(); 
    },500); 
}

출처

2012-02-04 09:20:39

완벽하게 작동했습니다. 고맙습니다! 나는 일주일 동안이 일을 해왔다. 당신이 한 일은 새로운 프레임을 표시하기 전에로드 할 시간을주기 위해 cam.src 할당을 루프 외부로 옮기는 것이 었습니다. 아마도 당신은 더 정확한 설명을 가지고있을 것입니다. 시간과 전문성에 감사드립니다! 완벽하게 작동합니다. Frank – Frank

다행 이었기 때문에 답을 받아 들일 수 있습니까? 감사 –

Canvas 및 DrawImage를 사용하여 저속 비디오를 90 도로 표시하려고 시도했습니다.

답변

관련 문제