saveframe
v0.0.5
Published
Save frames to disk out of a canvas element from browser
Readme
SaveFrame
Render an in-browser canvas application to png sequence file saved to disk using a Node.js script.
Install
npm install saveframeRun the server
The server is a Node.js script, you can run it with:
node node_modules/saveframe/server.js <foldername>where <foldername> is the folder where to put the png files (must be present and writable)
Configure the client
Include the required libraries and use the proper method to interact with the server.
Here a quick sample:
<html>
<head>
<script src="node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="node_modules/saveframe/client.js"></script>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
var canvas = document.querySelector('canvas')
// specify the canvas you want to render to disk
SaveFrame.init(canvas)
// draw something on your canvas
var ctx = canvas.getContext('2d')
ctx.fillStyle = '#f00'
ctx.fillRect(20, 20, 100, 100)
// save the frame to disk (into 'tmp/frame-0.png')
SaveFrame.save()
</script>
</body>
</html>
The PNG size will match the canvas size. You can then create a video using the image sequence, Quicktime of other similar tools do this job.
Run the client
To run the client file with the browser use a local webserver of your choice (http-server, browser-sync, python SimpleHTTPServer, whatever...).
You can watch e quick test here with this WelGL canvas:
