1

如何上传从网络摄像头拍摄的照片，我找到了有效的代码（仅在 Chrome 上）

我已经使用了代码，当点击拍照时，我得到了图片，但我没有在源代码上看到它？

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">

var video = document.querySelector("#vid");
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

var onCameraFail = function (e) {
    console.log('Camera did not work.', e);
};

function snapshot() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
    }
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video:true}, function (stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
}, onCameraFail);

</script>

如何将其添加到具有图片元素的表单中

<input name="avatar" class="avatar" type="file" required>

如您所见，该字段是必需的，因此如果将其添加到该字段，表单会将其视为非空？

为什么它在 Opera 上不起作用？我使用 Opera 12.15

更新：我找到了如何将画布转换为图像，但不知道如何将其填充到图像中：

a = canvas.toDataURL("image/jpeg")
document.getElementById("avatar").src = a

如果我使用 javascript 控制台，我会得到源代码，但如果我验证表单，表单会认为图像仍然丢失并且它是空白的。

有任何想法吗？

4

1 回答 1

0

使用在 300 毫秒内运行的 snapshot() 构建 SetInterval。

该按钮仅停止间隔，;)

<button onclick="clearInterval(ivl)">Take Picture</button>

var ivl = setInterval(function(){  snapshot(); },300);
于 2013-11-17T18:04:19.637 回答