StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would suggest:</p> <ol> <li><p>Use <code>setInterval</code> to capture the contents of your Canvas as a PNG data URL.</p> <pre><code>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 ); </code></pre></li> <li><p>Send all these PNG DataURLs to your server. It'll be a very large pile of data.</p></li> <li><p>Using whatever server-side language you like (PHP, Ruby, Python) strip the headers from the data URLs so that you are left with just the base64 encoded PNGs</p></li> <li><p>Using whatever server-side language you like, convert the base64 data to binary and write out temporary files.</p></li> <li><p>Using whatever 3rd party library you like on the server, convert the sequence of PNG files to a video. </p></li> </ol> <p><strong>Edit</strong>: Regarding your comment of external images, you cannot create a data URL from a canvas that is not <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements" rel="noreferrer"><em>origin-clean</em></a>. As soon as you use <code>drawImage()</code> with an external image, your canvas is tainted. From that link:</p> <blockquote> <p>All canvas elements must start with their <em>origin-clean</em> set to true. The flag must be set to false if any of the following actions occur:</p> <p>[...]</p> <p>The element's 2D context's <code>drawImage()</code> method is called with an <code>HTMLImageElement</code> or an <code>HTMLVideoElement</code> whose origin is not the same as that of the Document object that owns the canvas element.</p> <p>[...]</p> <p>Whenever the <code>toDataURL()</code> method of a canvas element whose origin-clean flag is set to false is called, the method must raise a <code>SECURITY_ERR</code> exception.</p> <p>Whenever the <code>getImageData()</code> method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a <code>SECURITY_ERR</code> exception.</p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload