Slit-scan Videos in JavaScript

This is the tool I used to create the slit-scan videos in my Slit-scan Renders of Videos with JavaScript blog post. It generates snapshots for every possible slit position and saves them as a series of PNG images.


This tool requires a recent version of Google Chrome and has been tested on Windows 8.1. It may work in Firefox and Opera. The full source code is available on GitHub. If you encounter any problems, please contact me or file an issue!

I put the script together rather quickly, and it still has some glitches and usability issues, which I will hopefully be able to fix soon.

First select a video file from your computer. Videos with smaller dimensions (480p or less) and lower frame rates (30 FPS or less) are preferred in order to keep the output data size small.

You can set the Start Time and End Time for the recording to further reduce the data size. The number of seconds times the Frame Rate determines the width of the output images in pixels. The longer you record, the wider the images will be, unless you manually override the Image Width setting. The total number of images generated is equal to the width of the source video (in pixels).

Try starting with smaller settings first, i.e. 50 seconds at 10 FPS on a 480p video, then work your way up and see how high your web browser can go. I have not been able to record more than a few hundred megabytes at a time.

You can then use a video processing utility like VirtualDub to create an AVI video from the individual frames. A video converter like Handbrake will let you convert it to MP4 and other container formats.

Words of Warning

Depending on the dimensions and length of your video, as well as the desired size of the output images, this tool may generate an enormous amount of data in the hundreds of megabytes or even gigabytes. It is possible that your browser will freeze up or crash.

After several conversions you may also have to restart your computer if video decoding no longer works properly (experienced on Windows 8.1). The tool computes an estimated output data size based on your settings. I suggest that you keep that number as small as possible.


Recording Options:
Start Time:
End Time:
Window Position:
Window Width (pixels):
Output Options:
Image Width (pixels):
Image Height (pixels):
Use video height

Estimated data size: 0.0 MB

Technical Notes

The automatic image download feature in this script requires the download attribute in HTML anchors, which is not supported in Internet Explorer and Safari at this time.

The script uses a single pass over the video to generate the individual slit-scan frames, which are stored in an array of canvases. Unlike the other tool for static slit-scan images, this one does not actually play the video in real-time, but seeks to individual frames based on the set frame rate.

There is probably room for optimizations here – pull requests are welcome!