js html5 调用摄像头拍照

发布时间：2020-08-22 18:28:14 作者：伊伊吖吖
来源：网络阅读：1040

<!DOCTYPE html>

<head>

<style>

.photo-img,.scan-photo{

position: relative;

}

.capture,canvas{

position: absolute;

top:0;

left:0;

right:0;

bottom:0;

max-width:100%;

height:100%;

margin:0 auto;

text-align: center;

}

#img_use{

position: absolute;

top:0;

left:0;

right:0;

width:100%;

height:auto;

max-height:100%;

}

.img-box{

width: 100%;

position: absolute;

z-index:1;

top:0;

left:0;

right:0;

bottom:0;

}

.img-box #img{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

max-width:100%;

margin:auto;

z-index: -1;

*zoom:1;

transform: scale(1.5) rotate(90deg);

}

.img-box:before {

content: "";

display: inline-block;

padding-bottom: 100%;

width: 0.1px; /*必须要有数值，否则无法把高度撑起来*/

vertical-align: middle;

}

</style>

</head>

<body>

<p class="fl">请将行车证正面有效放置在方框内</p>

</div>

</div>

</div>

<a href="information.html"><p class="scan-title">车险自助查询一体机</p></a>

<!-- <div class="mask-advert" >

</video>

</div>

</div>

</div> -->

<!-- <div class="mask-load">

</div>

</div> -->

</div>

<ul>

</ul>

</div>

//https://www.liangzl.com/get-article-detail-20944.html

$(function(){

var buffer;

var oCapture = document.querySelector(".capture");

var open = document.getElementById("open");

var img = document.getElementById('img');

var imgUse = document.getElementById('img_use');

var rePhoto = document.getElementById('rePhoto');

var trueUse = document.getElementById('submitTo');

window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

// 照片弹窗

$(".photo-close img").click(function(){

$(".mask-photo").hide();

});

invokingCarera();

//点击拍照

$('body').on('click','#open',function(){

console.log(1);

var canvas_new = document.getElementsByTagName('canvas')[0];

img.src = canvas_new.toDataURL("image/png");

imgUse.src = canvas_new.toDataURL("image/png");

let Orientation =6

//Orientation的值分别为:1（无旋转）6（旋转90度）3（旋转180度）8（旋转-90度）

// rotateImage(img);

$(".mask-photo").show();

$("#img_use").show();

$("#img").show();

});

//重新拍照

$('body').on('click','#rePhoto',function(){

$("#img").attr("src","").hide();

$("#img_use").attr("src","").hide();

$(".mask-photo").hide();

$(".capture").show();

$("canvas").show();

});

//确定使用

$('body').on('click','#submitTo',function(){

var canvas_new = document.getElementsByTagName('canvas')[0];

canvas_new.getContext('2d').drawImage(oCapture, 0, 0,-200, -300);

//mediaStreamTrack && mediaStreamTrack.stop();

//把canvas图像转为img图片

$(".mask-photo").hide();

$(".capture").hide();

$("canvas").hide();

imgUse.src = canvas_new.toDataURL("image/png");

console.log(imgUse.src); //图片

$("#img_use").show();

});

function invokingCarera(){

if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){

navigator.mediaDevices.getUserMedia({

'audio':true,

'video':{ 'facingMode': "user" }//调用前置摄像头，后置摄像头使用video: { facingMode: { exact: "environment" } }

})

.then(function(mediaStream) {console.log(555);getVideoStream(mediaStream)})

.catch(function(error) { console.log(666);console.log(error) })

}else if(navigator.getUserMedia){

navigator.getUserMedia({

'video':true,

'audio':true

},getVideoStream,getFail)

}else{

alert('不支持摄像头调用！')

}

screenShot();

}

//调用成功

function getVideoStream(stream){

buffer = stream;

if(oCapture.mozSrcObject !== undefined){

oCapture.mozSrcObject = buffer;

}else{

oCapture.src = window.URL && window.URL.createObjectURL(buffer);

}

oCapture.play();

}

function getFail(){

}

function screenShot(){

var canvas = document.createElement('canvas');

canvas.width=320,canvas.height = 456;

document.querySelector(".scan-photo").appendChild(canvas);

var ctx = canvas.getContext('2d');

function drawVideo(){

ctx.drawImage(oCapture, 0, 0, 400, 600);;

requestAnimationFrame(drawVideo);

}

window.requestAnimationFrame(drawVideo);

//window.requestAnimationFrame(drawVideo);

}

function rotateImage(image) {

alert('rotateImage');

var width = image.width;

alert(width);

var height = image.height;

alert(height);

var canvas_new = document.getElementsByTagName('canvas')[0];

var ctx = canvas_new.getContext('2d');

// var canvas = document.createElement("canvas");

// var ctx = canvas.getContext('2d');

// var newImage = new Image();

//旋转图片操作

EXIF.getData(image,function () {

alert("这是image");

var orientation = EXIF.getTag(this,'Orientation'); // orientation = 6;

//测试数据

alert('orientation:'+orientation);

switch (orientation){

//正常状态

case 1:

alert('旋转0°');

// canvas.height = height;

// canvas.width = width;

break;

//旋转90度

case 6:

alert('旋转90°');

canvas_new.height = width;

canvas_new.width = height;

ctx.rotate(Math.PI/2);

ctx.translate(0,-height);

ctx.drawImage(image,0,0);

imageDate = canvas_new.toDataURL("image/png",1)

img.src = imageDate;

break;

//旋转180°

case 3:

alert('旋转180°');

canvas_new.height = width;

canvas_new.width = height;

ctx.rotate(Math.PI);

ctx.translate(-width,-height);

ctx.drawImage(image,0,0);

imageDate = canvas.toDataURLtoDataURL("image/png",1)

img.src = imageDate;

break;

//旋转270°

case 8:

alert('旋转270°');

canvas_new.height = width;

canvas_new.width = height;

ctx.rotate(-Math.PI/2);

ctx.translate(-height,0);

ctx.drawImage(image,0,0);

imageDate = canvas.toDataURL('image/png',1)

img.src = imageDate;

break;

//undefined时不旋转

case undefined:

alert('undefined 不旋转');

break;

}

});

return newImage;

}

/**

* 修正图片旋转角度问题

* @param {file} 原图片

* @return {Promise} resolved promise 返回纠正后的新图片

function fixImageOrientation (file) {

return new Promise((resolve, reject) => {

// 获取图片

const img = new Image();

img.src = window.URL.createObjectURL(file);

img.onerror = () => resolve(file);

img.onload = () => {

// 获取图片元数据（EXIF 变量是引入的 exif-js 库暴露的全局变量）

EXIF.getData(img, function() {

console.log(img);

// 获取图片旋转标志位

var orientation = EXIF.getTag(this, "Orientation");

// 根据旋转角度，在画布上对图片进行旋转

if (orientation === 3 || orientation === 6 || orientation === 8) {

const canvas = document.createElement("canvas");

const ctx = canvas.getContext("2d");

switch (orientation) {

case 3: // 旋转180°

canvas.width = img.width;

canvas.height = img.height;

ctx.rotate((180 * Math.PI) / 180);

ctx.drawImage(img, -img.width, -img.height, img.width, img.height);

break;

case 6: // 旋转90°

canvas.width = img.height;

canvas.height = img.width;

ctx.rotate((90 * Math.PI) / 180);

ctx.drawImage(img, 0, -img.height, img.width, img.height);

break;

case 8: // 旋转-90°

canvas.width = img.height;

canvas.height = img.width;

ctx.rotate((-90 * Math.PI) / 180);

ctx.drawImage(img, -img.width, 0, img.width, img.height);

break;

}

// 返回新图片

canvas.toBlob(file => resolve(file), 'image/jpeg', 0.92)

} else {

return resolve(file);

}

});

};

});

}

})

</script>

</body>

</html>

js html5 调用摄像头拍照

相关阅读