javascript - 如何在上传到服务器之前保存 Canvas 图像？

Question

所以基本上我是通过相机捕获一些 html5 vidoe、canvas 和 button 标签的图像，但在我将此图像上传到之前服务器我需要将图像保存到互联网临时目录，然后访问图像并将图像上传到服务器，到目前为止我能做的是捕获 Canvas 图像，但不知道如何将其保存在本地电脑互联网临时目录中目录中，我发现了一个已经提出的问题，答案是

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=图像；

上面代码的问题是它会向客户端弹出下载框并请求客户端将其保存在哪里，但我需要保存图像而不向用户提示任何内容并将其保存到互联网临时目录。

这是我获取 Canvas 图像的代码

document.getElementById("snapButton").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
var myImg = document.getElementById("myImg");
myImg.src = canvas.toDataURL();
});

因此，如果有人告诉我应该在上面的 eventListener 中添加哪些代码来保存图像，我将非常感激。

Answer 1

如果您只需要一个临时位置来保存一小段数据(<5mb)，您可以使用 localStorage 。将 localStorage 视为应用数据的本地临时存储区域。 LocalStorage不需要用户的权限。

但出于明显的安全原因，将任何内容存储到用户的磁盘上都需要他们的许可，因此您无法避免向用户弹出窗口。