最近我一直在尝试使用Webrtc创建照片亭,几乎完成了所有的代码,但我还没有找到一种在捕获图像后保存图像的方法。
目前为止,这是我最接近实现目标的方式:
<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>
代码基本上是将网络摄像头流传送到画布元素中。按下空格键触发截取屏幕截图,然后以图像形式显示。因为我无法提供所下载文件的确切源,所以该按钮仅在浏览器中打开图像而不起作用。我真的很感谢您提供有关如何解决此问题的建议。先行致谢。
我已经使用以下代码成功地从画布中捕获了流程图像:
document.addEventListener ('keydown', function (event) {
if(event.keyCode == 32) {
document.querySelector('#screenshot').src = canvas.toDataURL('image/webp')
}
})
我想知道如何让用户从那里保存图像到他们的电脑上。