我正在开发一个 ASP .NET 应用程序,用户单击相机按钮并打开一个模式弹出窗口,其中相机加载(使用网络摄像头 js)。到目前为止,该应用程序运行良好。
现在,在模态弹出窗口上,我有一个“拍照”按钮,单击它后,我想拍摄照片并将其显示在连接网络摄像头的同一“PopupCam”元素上。我正在尝试使用 Webcam.snap 功能。
但捕获的图像无法附加到“PopupCam”div。我可以看到该函数被调用(因为我测试了 alert('hello') 并且它正在工作)但不知何故 GetElementById 附加捕获的图像不起作用。
这是我的模态 html 和我正在使用的 javascript。
我正在使用show.bs.modal事件在模态启动时加载相机。哪个工作正常。但是单击“btnCapture”按钮后,捕获的图像没有附加。即使我不使用 webcam.snap 功能并尝试附加任何随机图像,它现在也可以工作。加载在“PopupCam”div 上的相机保持原样。
$(document).on('show.bs.modal', '#camera-modal', function(event) {
Webcam.set({
width: 1040,
height: 558,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#PopupCam');
})
$(document).on('hide.bs.modal', '#camera-modal', function(event) {
Webcam.reset('#PopupCam');
});
$(document).on('click', '#btnCapture', function(event) {
alert('hello');
Webcam.snap(function(data_uri) {
document.getElementById('PopupCam').innerHTML =
'<img src="' +
data_uri +
'"/>';
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="camera-modal" class="modal fade">
<div class="modal-dialog" style="width:auto; margin-top: 0.5%; margin-bottom: 0.5%; margin-left:0.5%;">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 text-center">
<div id="PopupCam"></div>
</div>
<div class="col-sm-2 text-center">
<asp:button runat="server" id="btnCapture" class="btn btn-warning" style="width:100px;" text="Take Picture" />
<p></p>
<asp:button runat="server" id="btnCancel" class="btn btn-default" data-dismiss="modal" style="width:100px;" text="Cancel" />
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
该警报('hello')显示但图像未附加到“PopupCam”元素
我怎样才能让它工作?
(我有另一个代码,我正在做同样的事情,但不是来自模式弹出窗口,而是来自普通页面并且工作正常)
提前致谢!