darees darees - 1 month ago 5
Javascript Question

how to save a canvas image Before uploading to server?

So Basically I am capturing an image through camera with some html5

tags, But before I upload this image to server I need to save the image to the internet temporary directory and then access the image and upload the image to server, So far I could do is to capture the canvas image but don't know how to save it in the local pc internet temp directory, I found an already asked question which the answer was

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

the problem with above code is that it pops the download box to client and request the client where to save it, but I need to save the image without prompting anything to user and save it to internet temp direcotry.

here is the code where I take the canvas image

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

so I would really appreciate if somebody tell me what code do I add to above
to save the image.


If you just need a temporary place to hold a small piece of data (<5mb), you can use localStorage. Think of localStorage as a local temp storage area for your app's data. LocalStorage does not require user's permissions.

But for obvious security reasons, storing anything to the user's disk will require their permission so you cannot avoid the popup to the user.