HTML5 每隔几秒保存一次 Canvas 图像

Question

如何每隔几秒钟将画布图像保存到文件夹。

我有一个基本的画布绘图功能和一个下载功能来保存图像，如下所示：

<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);

我想实现一个名为开始/停止的按钮。

如果用户单击该按钮，我想每秒保存一次画布图像。

每张图片都应保存为一个新文件。

这怎么可能？ 有可能吗？

Answer 1

是的，这是可能的。浏览器会询问用户是否允许下载多个文件。只有当用户点击确认他/她要允许多个文件下载时，它才会下载多个图像。

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

我使用这个脚本。

    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");
            }
        }
    }

然后是一个简单的下载计时器。

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

文件的放置位置和名称由客户端决定。无法保证文件最终会在客户端的驱动器上，也无法知道下载是否已完成。

注意很遗憾原始答案已被删除。不是每个人都会同意方法，但这并不意味着方法是错误的。 “将不起作用”仅适用于不良代码，不适用于客户偏好。还是我们都应该删除答案，因为某些用户阻止了 Javascript，因此任何 javascript 答案都不起作用..

很高兴看到原来的答案。?