如何保存画布图像上传到服务器之前?

时间:2016-09-18 17:56:05

标签: javascript html5 image canvas html5-canvas

所以基本上我通过相机使用一些html5 vidoecanvasbutton标签来捕捉图像,但在我将此图像上传到服务器之前,我需要将图像保存到互联网临时目录,然后访问图像并将图像上传到服务器,到目前为止,我能做的是捕获画布图像,但不知道如何将其保存在本地的互联网临时目录,我发现一个已经问过的问题答案是

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

上面代码的问题是它将下载框弹出到客户端并请求客户端保存它,但我需要保存图像而不向用户提示任何内容并将其保存到Internet temp direcotry。

这是我拍摄画布图像的代码

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

所以如果有人告诉我我在eventListener上面添加了哪些代码来保存图片,我真的很感激。

1 个答案:

答案 0 :(得分:1)

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

但是出于明显的安全原因,将任何内容存储到用户的磁盘都需要他们的许可才能避免弹出给用户。