SaveFrame to disk from a browser canvas
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
0.png
LICENSE-MIT
README.md
client.js
package.json
server.js

README.md

SaveFrame

Render an in-browser canvas application to png sequence file saved to disk using a Node.js script.

npm version

Install

npm install saveframe

Run 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 available)

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: