webcamjs を使用してカメラからのライブ ストリームがあり、とても満足しています。ただし、320 x 240 の画像を提供しているため、ユーザーに 160 x 120 のみを表示できる方法が必要です。
HTML、JavaScript、または jQuery を使用してこれを達成する方法はありますか?
もっと説明しましょう...
クロムでは幅と高さのプロパティを使用して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>
ユーザーには、写真のアップロードを使用するオプションがあり、その写真タグがそこにあります。私はこれがキャンバスの何かであることを知っています...
ありがとう、
アビジート。