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圖片

回答

相關問題