Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

198
Views
Javascript Canvas iteratively save image to folder automatically

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?

about 4 years ago · Santiago Gelvez
2 answers
Answer question

0

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.

about 4 years ago · Santiago Gelvez Report

0

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.

about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!