How to save an image from canvas

How to save an image from canvas

Recently I've been attempting to create a photo booth by relying on Webrtc
and have nearly completed all of the code except I've not been able to
figure out a way to save the image after it has been captured.
This is the closest I've come so far to achieving my goal: enter code here
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>fotogoof</title>
<link rel="Stylesheet" href="css/bootstrap.css"/>
<link rel="Stylesheet" href="css/style.css"/>
<script type="text/javascript">
window.onload = function () {
var img = document.getElementById('screenshot');
var button = document.getElementById('saveImage');
img.src = '';
img.onload = function () {
button.removeAttribute('disabled');
};
button.onclick = function () {
window.location.href = img.src.replace('image/png',
'image/octet-stream');
};
};
</script>
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<h2 class="brand">Html5 Photobooth</h1>
</div>
</div>
</div>
<div class="container" id="body-wrap">
<div class="container" id="main">
<div class="span10">
<div id="video-container">
<canvas width="400" height="320" class="mask"></canvas>
<div id="counter">
</div>
</div>
<br><div id="pic-holder" class="pull-left"><img
id="screenshot"></div></br>
<input id="saveImage" type="button" value="save image"
disabled="disabled"/>
</div>
</div>
</div>
</div>
The code is essentially taking the webcam stream and feeding it into a
canvas element. Pressing the space button triggers a screenshot to be
taken, which then appears as an image. Because I'm unable to provide the
exact source of the file that is being downloaded the button only opens
the image in another tab in the browser instead of functioning properly. I
would really appreciate some input as to how I can resolve this. Thanks in
advance.