[英]Get the src of an image from HTML5 webcam
I have an application where the user will click on a picture from the webcam and save it to a database. 我有一个应用程序,用户可以在其中单击网络摄像头中的图片并将其保存到数据库中。 I have added the plugin from WebRTC . 我已经从WebRTC添加了插件。
My code is as below: 我的代码如下:
<form action="process.php" method="post">
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas">
</canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
<script>
var myImg = document.getElementById("photo").src;
</script>
<input type="submit" onclick="alert(myImg)">
</form>
But when I click on submit, to check what it passes, it alerts empty! 但是,当我单击“提交”时,要检查其通过的内容,它会发出空警报! Why is it not showing the src
? 为什么不显示src
?
Define one default src first. 首先定义一个默认的src。 Then replace that src with your taken photo: 然后用您拍摄的照片替换该src:
<script> var myImg = document.getElementById("photo").src; </script>
<div class="output"> <img id="photo" src="" alt="The screen capture will appear in this box."> </div>
There are two issues with html
, javascript
at Question html
和javascript
有两个问题
img
src
is still set to placeholder image when input type="submit"
is clicked, refreshing window
on form
submission 单击input type="submit"
时, img
src
仍设置为占位符图像,刷新form
提交window
form
is being submitted before img
element src
is set to data URI
at photo.setAttribute('src', data);
在将img
元素src
设置为photo.setAttribute('src', data);
data URI
之前,提交form
photo.setAttribute('src', data);
within takepicture
在takepicture
内
Try setting input type="submit"
disabled
attribute to prevent form
being submitted before takepicture
is called; 尝试设置input type="submit"
disabled
属性,以防止在takepicture
之前提交form
; attaching click
event to #startbutton
; 将click
事件附加到#startbutton
; within #startbutton
click
handler attaching onload
event to #photo
, which should alert
data URI
of <img>
src
after being set to data URI
representation of canvas
image set from video
within onload
handler; 内#startbutton
click
处理程序安装onload
事件#photo
,应该alert
data URI
的<img>
src
设定为后data URI
的表示canvas
从设置图像video
内onload
处理程序; set input type="submit"
disabled
attribute to false
to allow form
to be submitted. 将input type="submit"
disabled
属性设置为false
以允许提交form
。
Note also that error may occur if https:
protocol not used. 还请注意,如果不使用https:
协议,则可能会发生错误。
getUserMedia() no longer works on insecure origins.
To use this feature, you should consider switching your
application to a secure origin, such as HTTPS.
See [url] for more details.
<form>
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas">
</canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
<script>
document.getElementById("startbutton").addEventListener("click", function() {
document.getElementById("photo").onload = function() {
console.log(this.src);
alert(this.src);
document.querySelector("input[type=submit]").disabled = false;
};
})
</script>
<input type="submit" disabled>
</form>
plnkr https://plnkr.co/edit/qzvEdtCnQnzXceIpDumA plnkr https://plnkr.co/edit/qzvEdtCnQnzXceIpDumA
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.