Webcam.js如何获得160×120图像

Question

我有一条来自摄像头的直播流，它非常棒，我非常高兴。然而，它给320乘240的图像，我想要某种方式，我可以在只有160乘120显示给用户。

是否有任何方法可以使用HTML、JavaScript或jQuery来完成这一任务？

让我再描述一下..。

在chrome中，我通过CSS通过使用宽度和高度属性来限制显示区域，但是当我在IE中打开时，它使用闪光灯，它甚至没有显示出来。

<form>
.....
.....
<td>Photo</td>
                <td><input id="photo7" type="file" name="photo">
</td>
<div style="width: 320px; height: 240px; clear: right; float: right">
        <div id="takesnap11"
                    style="clear: both; float: right; text-align: center;"></div>
            <div id="my_camera" style="width: 320px; height: 240px; "></div>
            <img id="results2" height="120" width="160" />

        </div>
        <script src="../js/webcam.min.js" type="text/javascript"></script>
        <script>
    </script>
    </form>
</section>
<script>
function Initiate(){
    Webcam.set({
        image_format: 'jpeg',
        jpeg_quality: 90,
        dest_width: 160,
        dest_height: 120,
        force_flash: false
    });
    Webcam.attach( '#my_camera' );
    document.getElementById("takesnap11").innerHTML='<div onclick="take_snapshot();">Take Snap</div>';
}
function take_snapshot() {
    var data_uri = Webcam.snap();
    document.getElementById('resultssss').innerHTML ='<textarea style="width: 90px;" style="display:none" name="capturedimage"> '+data_uri+'</textarea>';
    document.getElementById('results2').src = data_uri;
}
</script>
<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$('#photo7').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();

fr.onload = function(ev2) {
    console.dir(ev2);
    $('#results2').attr('src', ev2.target.result);

    document.getElementById('resultssss').innerHTML ='<textarea style="width: 90px;" style="display:none" name="capturedimage"> '+ev2.target.result+'</textarea>';
};

fr.readAsDataURL(f);
});

</script>

用户可以选择使用照片上传，因此照片标签在那里。我知道这是画布上的东西

谢谢,

阿比吉特。

Answer 1

免责声明：我不使用webcamJS，但是..。

快速查看源代码就会发现，您可以在Webcam.set中设置几个属性，这将导致图像被裁剪：

crop_width:160,
crop_height:120,

有关它如何工作的更多信息(使用context.drawImage的剪辑版本)，请参阅第416至425行的源代码：

https://github.com/jhuckaby/webcamjs/blob/master/webcam.js