PC端末、携帯、タブレットカメラを呼び出して写真を撮ります.
13512 ワード
PCのカメラを呼び出して写真を撮ります.
HTMLコード:
HTMLコード:
HTMLコード:
<div id="android-camera">
<input type="button" title=" " value=" " onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()"> </button>
</div>
jsコード:<script>
//
function getMedia(){
let constraints = {
video:{width:500,height:500},
audio:true
}
// video
let video = document.getElementById("video");
// , Promise
// promise MediaStream
//then() Promise
//then() , then() then() ,
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream){
video.srcObject = MediaStream;
video.play();
});
}
//
function takePhoto(){
// Canvas
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0,500,500);
}
</script>
携帯電話、タブレットカメラを呼び出して写真を撮ります.HTMLコード:
<input id="uploadFile" type="file" name="uploadFile" accept="images/*" capture="camera" onchange="imgChange(event)" /> //visibility:hidden
<img src="" id="showImage" alt=""/>
<input type="button" value=" " id="choose_photo" />
JSコード:function imgChanfe(e){
console.info(e.target.files[0]); //
var dom = $("input[id^='imgTest']")[0];
var reader = new FileReader();
reader.onload = (function(file){
return function(e){
var sss = $("#showImage");
$("#showImage")[0].src = this.result
};
})(e.target.files[0]);
reader.readAsDateURL(e.target.files[0]);
}
//
$("#choose_photo").click(function(){ // file
$("#uploadFile").click(); //file change
})