Webcam.js如何获得160乘120的图像
Webcam.js How to get 160 by 120 image
我用webcamjs从相机里得到了一个直播,这太棒了,我很高兴。然而,它给出的是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>
用户可以选择使用照片上传,从而在那里使用照片标签。我知道这是画布上的东西,任何人都很感激。。。
谢谢,
Abhijeet。
免责声明:我不使用webcamJS,但。。。
快速查看源代码可以发现,您可以在Webcam.set
中设置几个属性,这些属性将导致图像被裁剪:
crop_width:160,
crop_height:120,
有关它如何工作的更多信息(使用context.drawImage的剪辑版本),请参阅第416-425:行的来源
https://github.com/jhuckaby/webcamjs/blob/master/webcam.js
相关文章:
- 使用 js 将背景图像设置为 HTML
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 在Node.js中上传和检索图像
- 更改标记.js图像/链接表达式
- 将gif图像添加到chart.js V2.0中
- 使用JS按顺序显示图像,而不是随机显示
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- 使用服务器上的HTML/js在网页上显示图像
- 如何在fabric js中向多边形添加图像
- 使用JS滑动或滚动图像
- 需要帮助修复图像JS的动态位置
- 多次更改背景图像JS
- 图像 /JS /css/html 从 Weblogic 9 迁移到 Weblogic 10.3.6 后不会在 chrom
- 无法使用拖放区上传图像.js |导轨 4 和回形针
- 重叠图像JS Slider
- 创建了新图像,但显示的是旧图像JS(AJAX)
- 如何在一次上传多个图像后显示多个图像?JS
- 将iframe放置在图像/JS加载的图像的顶部,现在iframe在图像的下方
- 如何通过Node传输输出的原始图像.JS
- 如何使用预先输入显示图像.js