Fatal编程技术网
  • javascript/
  • Javascript HTML5每隔几秒钟保存一次画布图像

Javascript HTML5每隔几秒钟保存一次画布图像

javascript html canvas

Javascript HTML5每隔几秒钟保存一次画布图像,javascript,html,canvas,Javascript,Html,Canvas,如何每隔几秒钟将画布图像保存到文件夹中。 ­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

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

我有一个基本的画布绘制功能和一个下载功能，可以像这样保存图像：

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


var link=document.createElement（'a'）；
link.innerHTML='下载图像'；
link.addEventListener（'click'，函数（ev）{
link.href=canvas.toDataURL（）；
link.download=“mypainting.png”；
}，假）；
document.body.appendChild（链接）；
我想实现一个名为start/stop的按钮

如果用户单击该按钮，我希望每秒保存画布图像

每个图像应保存为新文件

这怎么可能呢？
甚至有可能吗？

是的，有可能。浏览器将要求用户允许多个文件下载。只有当用户单击确认他/她希望允许多个文件下载时，它才会下载多个图像

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
函数doCanvas（）{
ctx.fillStyle='#f90'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle='#fff'；
ctx.font='30px无衬线'；
ctx.fillText（“代码项目”，10，canvas.height/2-15）；
ctx.font='13px无衬线'；
ctx.fillText（'单击开始下载图像'，15，canvas.height/2+35）；
}
函数downloadCanvas（链接、canvasId、文件名）{
link.href=document.getElementById（canvasId.toDataURL（）；
link.download=文件名；
}
document.getElementById（'download'）.addEventListener（'click'，function（）{
下载画布（这是“canvas”、“test.png”）；
}，假）；
doCanvas（）；
$（文档）.ready（函数（）{
$（'#start'）。在（'单击'，函数（）上）{
如果（确认（'这将继续每2秒钟下载一次图像，是否继续？'））{
setInterval（函数（）{
$（'#下载'）[0]。单击（）；
}, 2000);
}
});
});

正文{
背景色：#55555 7；
填充：0；
保证金：0；
溢出：隐藏；
字体系列：无衬线；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
帆布{
边框：1px实心#000；
浮动：左；
明确：两者皆有；
}
#下载{
浮动：左；
光标：指针；
颜色：#ccc；
填充：3倍；
}
#下载：悬停{
颜色：#fff；
}



对不起，没有画布
确保您没有阻止多个文件下载

开始
我使用这个脚本


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


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

请注意，原始答案已被删除。不是每个人都会同意方法，但这并不意味着方法是错误的。“将不工作”仅适用于错误代码，而不适用于客户端首选项。或者我们都应该删除答案，因为一些用户阻止Javascript，因此任何Javascript答案都不起作用


很高兴看到原来的答案。保存是指它每秒钟更新一次相同的文件，还是将其另存为新文件？@Ivar它始终是一个新文件为什么要每隔几秒钟保存一次？它是作为撤销历史记录还是什么？预期用途对解决方案有很大影响。@EmilS.Jørgensen另一个应用程序需要每秒获取这些图像，以便向用户显示。。。关于这件事，我不能多说了。恐怕你那时不知所措。浏览器不允许在没有用户交互的情况下自动下载到特定文件夹。对于浏览器来说，这是一个安全问题，以防止网站将病毒直接放入
System32
或类似系统中。您可以每隔几秒钟提示用户下载，但这将是糟糕的用户体验。您是否可以使用一些服务器端代码将图像放在需要的位置？如果您的服务器可以访问相关文件夹，则它可以将文件放在需要的位置。这只会保存图像once@Kaiido好的，在用户下载图像之前每2秒发送一次确认。我想问题解决了，所以我会把这个“报价单”给我。当这种情况发生时，你更喜欢一个评论，而不是把它包含在你的答案中，它与此无关。当我发表评论说人们不应该运行这个代码段时，有一个警报与“另存为”弹出窗口一起抛出，间隔1秒。这意味着一个无限循环，除非您足够快，可以关闭此警报，请避免弹出窗口并单击
隐藏代码段
链接。那就不行了。这并不是因为在我说“是”之后，一个浏览器默认始终信任该网站，这对所有浏览器都是如此。。。。。。在市场上。“未经用户同意，我们无法在用户机器上保存”仍然是默认行为。更不用说最初的想法是可怕的（如果我把我的电脑放在这个页面上好几个小时而没有注意到它正在填满我的硬盘呢？），但是让它成为49%市场的可怕用户体验会毁掉你的网站。所以说“是的，这是可能的”是错误的，而不展示一张关于巨大警告的便条也是错误的。@kaido我完全理解，而你是

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