將畫布導出爲視頻

是否可以將畫布動畫導出爲視頻？我想建立一個工具，允許創建簡單的動畫，但我想將它們導出爲.avi .mp4或任何視頻格式。將畫布導出爲視頻

這可能嗎？如果是這樣，我該怎麼做？

2012-05-21 spiroski

我在尋找類似的東西和滿足到目前爲止，我還沒有發現任何滿足我的需求，但這裏是一個方法，我將採取滿足您的需求：以圖像集合（動畫gif）發送到您的服務器，在服務器上使用ffmpeg將其轉換爲視頻。沿着ffmpeg -i animation.gif -s 420x300 animation.avi – Quickredfox

您可以在畫布所在的屏幕的預定義區域使用屏幕捕獲軟件。

http://www.webresourcesdepot.com/10-free-screen-recording-softwares-for-creating-attractive-screencasts/

來源

2012-05-21 23:33:49 realPro

的路線，我認爲他的目的是爲人們創建一個網頁來製作動畫並保存爲視頻文件。 @ user986871糾正我，如果我錯了。 – rcdmk

是的，我的意圖是這是一個創建簡單的動畫服務。如果用戶需要在此之後記錄屏幕，則不太可用。 – spiroski

你可以嘗試使用一個回調函數來註冊一個監聽器requestAnimationFrame和每個循環嘗試後捕捉到畫布png文件保存到某個地方或者服務器端或客戶端使用HTML5的一些持久的方法然後再使用另一個軟件如ffmpeg將它們放在一起形成一個視頻文件。

window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
    })();

代碼來獲取畫布圖像/ PNG信息

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png");

來源

2013-06-26 01:50:17 carlosbpf

這將創建這樣一個大數據，並可能帶來服務器或您自己的電腦。嘗試將任何視頻的每個幀轉換爲jpgs/pngs ...然後您會看到。沒有其他辦法。 –

@MuhammadUmer這不能打倒服務器... – Vallentin

將畫布導出爲視頻

回答

相關問題