I am running some generative art functions to create an image in HTML/JS canvas. I have a variable in a loop that I would like to increment in the function and regenerate the image many times thus creating a succession of gradually changing images I would like to "stitch" together as a video showing a systematic evolution. I do not want to use a download link or right click on the images to save them. I would like to specify a folder location on my PC and have the infdividual images automatically save to the location. Is this possible?

CodePudding user response：

For the first part of your question, you can capture animations created in a canvas element using the MediaRecorder interface of the browser's MediaStream Recording API. MDN have some details about how to set this up here: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

The second part of your question is more difficult - browsers are sandboxed from the user's device for security reasons. There is the new File System Access API - as described in this WebDev article - but I've never used it so cannot say how useful it would be for your use case.

Alternatively, you could send the video, or image snapshots, to a remote file storage facility and download them from there.

CodePudding user response：

If this is a one-off for yourself and not a public website, you can use node-canvas, and have full filesystem access. You can then use ffmpeg to stitch frames together:

ffmpeg -framerate 30 -i /path/to/folder/fileName.d.png

Use d if your images are labeled 10-99, d for 100-999, etc.