❤
npm
Sign UpSign In

saveframe

0.0.5 • Public • Published

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 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:

Readme

Keywords

none

Package Sidebar

Install

npm i saveframe

Weekly Downloads

0

Version

0.0.5

License

none

Unpacked Size

677 kB

Total Files

7

Last publish

Collaborators

  • abusedmedia
Try on RunKit
Report malware