js html5 調(diào)用攝像頭拍照

發(fā)布時間：2020-08-22 18:28:14 來源：網(wǎng)絡(luò) 閱讀：1036 作者：伊伊吖吖欄目：web開發(fā)

<!DOCTYPE html>

<head>

????<meta charset="UTF-8">

????<title>掃描</title>

????<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

????<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/car/css/head.css">

????<script src="__PUBLIC__/home/car/js/jquery-1.11.1.min.js" type="text/javascript"></script>

????<script src="__PUBLIC__/home/car/js/style.js" type="text/javascript"></script>

????<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;???/*必須要有數(shù)值，否則無法把高度撐起來*/

vertical-align: middle;

}

????</style>

</head>

<body>

????

????<div class="tips">

????????<img src="__PUBLIC__/home/car/images/scan-people.png" class="fl">

????????<p class="fl">請將行車證正面有效放置在方框內(nèi)</p>

????</div>

????

????<div class="scan">

????????

????????<div class="scan-four"></div>

????????

????????<div class="scan-photo">

????????????<img src="__PUBLIC__/home/car/images/scan-4.png">

????????</div>

????</div>

????

????<div class="scan-btn">

????????<button type="button" id="open"></button>

????</div>

????<a href="information.html"><p class="scan-title">車險自助查詢一體機</p></a>

????

????

????

????

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

????????<div class="advert">

????????????<div class="advert-close"><img src="__PUBLIC__/home/car/images/close.png"></div>

????????????<div class="advert-video">

???????????? ? ?<video id="video" ?meted="meted" controls="controls" loop="loop" autoplay preload>

???????????? ? ? ?<source src="http://s3.bytecdn.cn/aweme/resource/web/static/image/index/new-tvc_889b57b.mp4" type="video/mp4" play="true" >

???????????? ? ?</video>

????????????</div>

????????????<div class="advert-text">

????????????????<p>正在加載中，請稍后...</p>

????????????</div>

????????</div>

????</div> -->

????

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

????????<div class="load">

????????????<img src="images/load.gif">

????????</div>

????</div> -->

????

????<div class="mask-photo" style="display:none;">

????????<div class="photo">

????????????<div class="photo-close"><img src="__PUBLIC__/home/car/images/close.png"></div>

????????????<div class="photo-img">

</div>

????????????</div>

????????????<div class="photo-btn">

???????????? ? ?<ul>

????????????????????<li><a href="#" id="submitTo">提交</a></li>

????????????????????<li><a href="#" id="rePhoto">重拍</a></li>

???????????? ? ?</ul>

????????????</div>

????????</div>

????</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（無旋轉(zhuǎn)）6（旋轉(zhuǎn)90度）3（旋轉(zhuǎn)180度）8（旋轉(zhuǎn)-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圖像轉(zhuǎn)為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" }//調(diào)用前置攝像頭，后置攝像頭使用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('不支持?jǐn)z像頭調(diào)用！')

}

screenShot();

}

????????//調(diào)用成功

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();??? ?

//旋轉(zhuǎn)圖片操作????? ?

EXIF.getData(image,function () {????

alert("這是image");? ? ? ? ? ?

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

//測試數(shù)據(jù)??? ? ? ? ? ?

alert('orientation:'+orientation);??? ? ? ? ? ?

switch (orientation){???? ? ? ? ? ? ? ?

//正常狀態(tài)??? ? ? ? ? ? ? ?

case 1:?? ? ? ? ? ? ? ? ? ?

alert('旋轉(zhuǎn)0°');??? ? ? ? ? ? ? ? ? ?

// canvas.height = height;??? ? ? ? ? ? ? ? ? ?

// canvas.width = width;????? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ? ?

break;??? ? ? ? ? ? ? ?

//旋轉(zhuǎn)90度?? ? ? ? ? ? ? ?

case 6:?? ? ? ? ? ? ? ? ? ?

alert('旋轉(zhuǎn)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;??? ? ? ? ? ? ? ?

//旋轉(zhuǎn)180°????? ? ? ? ? ? ? ?

case 3:?? ? ? ? ? ? ? ? ? ?

alert('旋轉(zhuǎn)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;??? ? ? ? ? ? ? ?

//旋轉(zhuǎn)270°????? ? ? ? ? ? ? ?

case 8:?? ? ? ? ? ? ? ? ? ?

alert('旋轉(zhuǎn)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時不旋轉(zhuǎn)?? ? ? ? ? ? ? ?

case undefined:?? ? ? ? ? ? ? ? ? ?

alert('undefined? 不旋轉(zhuǎn)');????? ? ? ? ? ? ? ? ? ?

????? ? ? ? ? ? ? ? ? ?

break;??? ? ? ? ? ?

}???? ? ? ?

});?? ?

return newImage;????

}

/**

? ? ? ?* 修正圖片旋轉(zhuǎn)角度問題

? ? ? ?* @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 = () => {

// 獲取圖片元數(shù)據(jù)（EXIF 變量是引入的 exif-js 庫暴露的全局變量）

EXIF.getData(img, function() {

console.log(img);

// 獲取圖片旋轉(zhuǎn)標(biāo)志位

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

// 根據(jù)旋轉(zhuǎn)角度，在畫布上對圖片進行旋轉(zhuǎn)

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

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

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

switch (orientation) {

case 3: // 旋轉(zhuǎn)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: // 旋轉(zhuǎn)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: // 旋轉(zhuǎn)-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>

向AI問一下細(xì)節(jié)

js html5 調(diào)用攝像頭拍照

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽