问题描述
如何上传我从网络摄像头拍摄的照片,
How do i upload a picture that i took from a webcam, i've found a code that worked (only on Chrome)
我已经使用了代码,当我拍照时,我得到了图片,但我没看到它来源?
i've used the code, and when clic on Take picture, i got the picture but i dont see it on the source?
<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>
如何将其添加到具有图片元素的表单
How do i add it to a form that have a picture element
<input name="avatar" class="avatar" type="file" required>
如您所见,该字段是必填字段,因此如果将字段添加到该字段,表单将看到它是非空的?
as you can see, the field is required, so if it is added to that field the form will see it as a non-empty?
为什么它不能用于Opera?我使用Opera 12.15
Why it dont work on Opera? i use Opera 12.15
更新:,但不知道如何在图片中填充它:
Update: i found how to convert to canvas to image, but dont know how to fill it in the image:
a = canvas.toDataURL("image/jpeg")
document.getElementById("avatar").src = a
如果我使用javascript控制台,我会获得源代码,但如果我验证表单,则表单认为图像仍然缺失且为空白。
if i use the javascript console, i get the source, but if i validate the form, the form thinks that the image is still missing and it is blank.
任何想法?
推荐答案
使用snapshot()运行构建SetInterval 300毫秒。
Build the SetInterval with snapshot() runing in 300ms.
该按钮仅停止间隔,;)
The button only stop the interval, ;)
<button onclick="clearInterval(ivl)">Take Picture</button>
var ivl = setInterval(function(){ snapshot(); },300);
这篇关于上传从网络摄像头拍摄的照片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!