html5 canvas 출력을 비디오 또는 swf 또는 png 시퀀스로 캡처합니까?

Question

HTML5 캔버스 출력을 비디오 또는 swf png 시퀀스로 가져와야합니다.

이미지 캡처를 위해 stackoverflow에서 다음 링크를 찾았습니다.
Capture HTML Canvas as gif/jpg/png/pdf?

그러나 우리가 출력을 비디오 또는 swf의 png 시퀀스로 만들려면 누구나 제안 할 수 있습니까?

편집 :

좋아, 이제 나는 그것을 시도하고 난 단지 모양, 직사각형 또는 다른 그래픽을 사용하는 경우는 잘 작동하지만 그리하지 않을 경우, 서버에 저장하기 위해 캔버스 데이터를 캡처하는 방법을 이해 캔버스 요소에 외부 이미지. 캔버스에서 그림을 그리기 위해 그래픽 또는 외부 이미지를 사용하는지 여부는 관계없이 누구나 캔버스 데이터를 완벽하게 캡처하는 방법을 말해 줄 수 있습니까?

나는 다음과 같은 코드를 사용 : 나는 새로운 캔버스를 생성하고, 그 위에 두 번째 캔버스에 그려진 빨간색 사각형을 캡처 된 데이터를 끌어 내 "데이터"변수로 캔버스 데이터를 복용 후

var cnv = document.getElementById("myCanvas"); 
var ctx = cnv.getContext("2d"); 

if(ctx) 
{ 
    var img = new Image(); 

    ctx.fillStyle = "rgba(255,0,0,0.5)"; 
    ctx.fillRect(0,0,300,300); 
    ctx.fill(); 

    img.onload = function() 
    { 
    ctx.drawImage(img, 0,0); 
    } 

    img.src = "my external image path"; 

    var data = cnv.toDataURL("image/png"); 
} 

을하지만, 그 외부 이미지는 그렇지 않습니다.

미리 감사드립니다.

Answer 1

내가 제안 :

1. 사용 setInterval는 PNG 데이터 URL로 캔버스의 내용을 캡처 할 수 있습니다.

   function PNGSequence(canvas){ 
       this.canvas = canvas; 
       this.sequence = []; 
   }; 
   PNGSequence.prototype.capture = function(fps){ 
       var cap = this; 
       this.sequence.length=0; 
       this.timer = setInterval(function(){ 
       cap.sequence.push(cap.canvas.toDataURL()); 
       },1000/fps); 
   }; 
   PNGSequence.prototype.stop = function(){ 
       if (this.timer) clearInterval(this.timer); 
       delete this.timer; 
       return this.sequence; 
   }; 
   
   var myCanvas = document.getElementById('my-canvas-id'); 
   var recorder = new PNGSequence(myCanvas); 
   recorder.capture(15); 
   
   // Record 5 seconds 
   setTimeout(function(){ 
       var thePNGDataURLs = recorder.stop(); 
   }, 5000); 
   

2. 모든 PNG DataURL을 서버로 보냅니다. 그것은 매우 큰 데이터 더미가 될 것입니다.

3. 당신이 어떤 서버 측 언어를 사용하여 단지 base64로 인코딩 된 PNG 파일

4. 왼쪽되도록 당신이 원하는대로 서버 측 언어 (PHP는, 루비, 파이썬) 데이터 URL의 헤더를 제거하여 like, base64 데이터를 바이너리로 변환하고 임시 파일을 작성하십시오.

5. 서버에서 원하는 타사 라이브러리를 사용하여 PNG 파일의 시퀀스를 비디오로 변환하십시오.

편집 : 외부 이미지의 의견에 대해서는, 당신은 origin-clean없는 캔버스에서 데이터 URL을 만들 수 없습니다. drawImage()을 외부 이미지와 함께 사용하면 캔버스가 오염됩니다. 링크에서 :

모든 캔버스 요소는 사실에 자신의 기원 청소 세트로 시작해야합니다.다음 작업이 발생하면 플래그는 거짓으로 설정해야

[...] 소자의 2D 문맥의 drawImage() 방법은 HTMLImageElement 또는 기점이되지 같은 인 HTMLVideoElement 불려

canvas 엘리먼트를 소유 한 Document 객체의 값.

[...] 출처 깨끗한 플래그가 false로 설정되어있다라고 캔버스 요소의 toDataURL()있어서, 상기 방법은 SECURITY_ERR 예외가 발생할 때마다해야

.

오리진 클린 플래그가 false로 설정된 캔버스 요소의 2D 컨텍스트에 대해 getImageData() 메서드를 호출 할 때마다 올바른 인수를 사용하여 호출 할 때마다 메서드에서 SECURITY_ERR 예외를 발생시켜야합니다.

Answer 2

시작하려면 일정한 간격으로 캔바스에서 픽셀 데이터를 캡처하고 싶습니다 (JavaScript 타이머를 사용하는 것이 좋습니다). 캔버스의 컨텍스트에서 context.getImageData를 호출하여이를 수행 할 수 있습니다. 그러면 비디오 스트림으로 전환 할 수있는 일련의 이미지가 생성됩니다.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation