使用JavaScript从网络摄像头捕获图像，无需页面刷新

我创建了HTML表单，其中一个字段是一个

canvas

div，它从用户的网络摄像头获取图像并将其保存为base64\u encode，目前只需

console.log（）

数据。 问题在于，每次用户按下“拍照”按钮后，页面刷新，之前输入的所有数据消失/删除。 我一直在试图弄清楚是什么原因导致了这次刷新，但无法弄清楚

这是相关的HTML部分：

  <div class="form-group">
    <input minlength=8 type="password" class="form-control" name="pass" placeholder="Enter Password" required/>
  </div>

  <div class="form-group">
    <div id="camera">
        <div class="center clear">
            <video id="video" width="320" height="240" autoplay></video>
            <button id="snap">Take Picture</button>
            <canvas id="canvas" width="320" height="240"></canvas>
        </div>
    </div>

你知道为什么要点击

拍照吗

刷新页面，我如何防止它？？thx

如果您在

中有

，则默认情况下，单击它将提交表单。要防止出现这种情况，可以使用停止提交

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
}, true);

---

为了防止其他人卷入这个问题，我在@Mike C.的指导下设法解决了这个问题。。。 我只需将其添加到

按钮

：

---

拍照

你的按钮在表单中吗？是的……我会上传更大一部分的htmlit不起作用，但会引导我找到解决方案……谢谢

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
}, true);