HTML5 save Canvas image every few seconds

Question

How can I save every few seconds a canvas Image to a Folder. ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

I have a Basic canvas drawing function and a download function to save the image like this:

<canvas></canvas>

var link = document.createElement('a');
    link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);
document.body.appendChild(link);

I want to implemente a button named start / stop.

If the user clicks on that button I want to save every second the canvas Image.

Every Image shall be saved as a new file.

How would this be possible? Is it even possible?

Answer 1

Yes it is possible. Browser will ask the user to allow multiple file download. It will only download multiple images if user clicks confirms that he/she want to allow multiple file download.

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

function doCanvas() {
    ctx.fillStyle = '#f90';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '30px sans-serif';
    ctx.fillText('Code Project', 10, canvas.height / 2 - 15);
    ctx.font = '13px sans-serif';
    ctx.fillText('Click start to download images', 15, canvas.height / 2 + 35);
}

function downloadCanvas(link, canvasId, filename) {
  link.href = document.getElementById(canvasId).toDataURL();
  link.download = filename;
}

document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

doCanvas();

$( document ).ready(function() {
  $('#start').on('click', function() {
    if( confirm('This will continue download image every 2 second, do you want to proceed?') ) {
      setInterval(function() {
          $('#download')[0].click();
        }, 2000);
    }
  });
});

body {
  background-color:#555557;
  padding:0;
  margin:0;
  overflow:hidden;
  font-family:sans-serif;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
canvas {
  border:1px solid #000;
  float:left;
  clear:both;
}
#download {
  float:left;
  cursor:pointer;
  color:#ccc;
  padding:3px;
}
#download:hover {
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="250" height="150" id="canvas">Sorry, no canvas available</canvas>
<p>Make sure you have not blocked multiple file downloads.</p>
<a id="download"> </a>
<button id="start">Start</button>

SOURCE

Answer 2

I use this script.

    function saveImageAs(canvas, filename, type, quality){      // No IE <10 support. Chrome URL bug for very large images may crash
        var anchorElement, event, blob;
        type = type ? "png" : type;

        // for IE >= 10
        if(canvas.msToBlob !== undefined && navigator.msSaveBlob !== undefined){ 
           blob = canvas.msToBlob(); 
           navigator.msSaveBlob(blob, filename + "." + type); 
           return;
        }
        anchorElement = document.createElement('a');    // Create a download link
        if(type.toLowerCase() === "jpg" || type.toLowerCase() === "jpeg"){
            quality = quality ? quality : 0.9;
            anchorElement.href = canvas.toDataURL("image/jpeg",quality);         // attach the image data URL
        }else{                
            anchorElement.href = canvas.toDataURL();         // attach the image data URL
        }
        // check for download attribute
        if ( anchorElement.download !== undefined ) {
            anchorElement.download = filename + "." + type; // set the download filename
            if (typeof MouseEvent === "function") {     // does the browser support the object MouseEvent
                event = new MouseEvent( "click", {view  : window, bubbles: true,cancelable : true} );
                anchorElement.dispatchEvent(event); // simulate a click on the download link.
            } else
            if (anchorElement.fireEvent) {          // if no MouseEvent object try fireEvent 
                anchorElement.fireEvent("onclick");
            }
        }
    }

Then a simple download timer.

var timeoutHandle;
function startDownloads(){
    saveImageAs(canvas,"snap.jpg","jpeg");
    timeoutHandle = setTimeout(startDownloads,2000);
}
function stopDownloads(){
    clearTimeout(timeoutHandle);
}

Where the file is put and what name it gets is up to the client. There is no guarantee that the file will end up on the client's drive, nor is there any way to know if the download has completed.

Note Shame that the original answer was deleted. Not everyone will agree on methods, but it does not mean the method is wrong. "Will not work" only applies to bad code, not client preferences. Or should we all remove answers because some users block Javascript and thus any javascript answer will not work..

Good to see the original answer back.