Save image to local automatically

Question

I'm new to javascript and html5. I'm doing my college project. I'm creating a web-based photo capturing system. Is it possible to automatically save the image to local storage. After user had hit on the capture button?

FYI, when the user hit on capture button, it active this function

function(){context.drawImage(video, 0, 0, 320, 240)}

Thanks.

Answer 1

You can use toDataURL to generate an <a> link which would allow the user to download the image:

function(){
    context.drawImage(video, 0, 0, 320, 240);
    var dl = document.createElement("a");
    dl.href = canvas.toDataURL();
    dl.innerHTML = "Download Image!";
    dl.download = true; // Make sure the browser downloads the image
    document.body.appendChild(dl); // Needs to be added to the DOM to work
    dl.click(); // Trigger the click
}

This should then initiate the download of the image. This relies on browser support of the download attribute.

Example jsFiddle