Javascript Canvas 迭代自动保存图片到文件夹

Question

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?

Answer 1

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.

Answer 2

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.%02d.png

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