每当我单击相机按钮拍摄第二张照片时,都会出现以下错误。
这是HTML代码:
<div class="list-buttons">
<button class="btn btn-default btn-camera btn-violet" data-toggle="modal" data-target="#camera-modal" data-backdrop="false">
<i class="fa fa-camera"></i>
</button>
</div>
<div class="take-picture">
<div class="row all-pictures">
</div>
</div>
<div class="modal fade" id="camera-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-xs-9">
<h5>Take a Picture</h5>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal-body" style="padding:0px 0px 32px 0px;">
<div id="my_camera"></div>
<div class="list-buttons" style="display: flex; justify-content: space-between; margin: 20px;">
<button class="btn btn-default btn-violet btn-take">
<i class="fa fa-camera-retro"></i>
</button>
<button class="btn btn-default btn-violet btn-take">
<i class="fa fa-camera-retro"></i>
</button>
</div>
</div>
</div>
</div>
</div>
这是JS代码:
$('#camera-modal').on('show.bs.modal', function (event) {
Webcam.set({
width: 800,
height: 600,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.set("constraints", {
facingMode: "environment"
});
Webcam.attach( '#my_camera' );
$('.btn-take').on('click', function() {
Webcam.snap( function(data_uri) {
console.log("test")
$('.all-pictures').append(''+
'<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">'+
'<img loading="lazy" src="'+data_uri+'" class="img-responsive">' +
'</div>');
} );
$('[data-dismiss="modal"]').click();
})
})
$('#camera-modal').on('hide.bs.modal', function (event) {
console.log("MODAL CLOSED")
Webcam.reset( '#my_camera' );
});
请在这里检查这个小提琴:https ://jsfiddle.net/38qdco6j/4/
要复制错误:
- 点击相机图标
- 拍照,点击模态框内的相机图标
- 重复 1 和 2
另一个是:
- 点击相机图标
- 关闭模态
- 再次单击相机图标
- 拍照,点击模态框内的相机图标
请帮助如何解决这个问题。谢谢!