为什么现场camra图像在图片框中重叠

Question

我是html和所有网络开发的新手......并且卡住了

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-6">Image</label>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3" >
                    <div id="browseimage" class="form-group">
                        <img id='output'  src="images\user.png" height="150" width="150">    
                    </div>
                </div>
                <div class="col-md-3" >
                    <div id="liveimage" height="150" width="150" />
                </div>
            </div>                       
        </div> 
        <div class="row col-md-3">
            <input type='file' accept='image/*' title="" onchange='openFile(event)'>
            <button type="livecamrabtn" onClick="initialize_camra()">Live Camera</button>
            <button  value="Take Snapshot" onClick="take_snapshot()"/>      
        </div> 
    </div>
</div>
<script>
    var openFile = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
            var dataURL = reader.result;
            var output = document.getElementById('output');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

我想并排显示图像......但我不知道问题存在于何处？ 请建议

Answer 1

您需要在同一个div中定义图像和视频div。并将视频div设置为绝对位置和z-index。

<div id="browseimage" class="form-group"  style="width:150px;height:150px" >
    <img id='output'  src="images\user.png" height="150" width="150">
    <div id="liveimage" height="150" width="150" style="postition:absolute;z-index:999"/>
    </div>    
</div>