Webcam.js如何获得160乘120图片

我有一个使用webcamjs来自摄像头的实时流，这非常棒，我非常高兴。然而，它是320×240的图像，我想用某种方式向用户显示160×120。Webcam.js如何获得160乘120图片

有什么办法可以使用HTML或JavaScript或jQuery来完成这个任务吗？

让我更形容了......

在Chrome我以width和height属性的限制通过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>

用户可以选择使用照片上传，因此，那里的照片标记。我知道这是与帆布任何帮助赞赏...

谢谢，
Abhijeet。

来源

2014-09-11 Abhijeet

你应该包括你当前的代码，你会得到更好的回应。 – 2014-09-11 10:48:33

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

快速查看源代码显示，你可以设置Webcam.set几个属性，这将导致图像进行裁剪：

crop_width:160, 
crop_height:120,

有关它是如何工作的详细信息（使用context.drawImage的剪辑版本），参考源的线416-425：

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

来源

2014-09-12 05:50:23 markE

我试过这个，但不是亲爱的......！ – Abhijeet 2014-09-12 06:23:32

'不工作'不是很具体 - 所以这里有一些关于发现它不工作的一般建议。 WebcamJS使用画布的'drawImage'方法创建图像。通过使用浏览器的开发工具来调查包含'drawImage'的两行代码中的断点。然后逐步浏览WebcamJS代码以发现正在发生的事情。 :-) – markE 2014-09-12 15:22:23

如果你不使用Webcam.js，那么你在使用什么？ – Abhijeet 2014-09-15 08:57:31

Webcam.js如何获得160乘120图片

回答

相关问题