中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js html5 調用攝像頭拍照

發布時間：2020-08-22 18:28:14 來源：網絡 閱讀：1042 作者：伊伊吖吖 欄目：web開發

<!DOCTYPE html>

<html lang="en">

<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">

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

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

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

vertical-align: middle;

}

????</style>

</head>

<body>

????<!-- 提示 -->

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

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

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

????</div>


????<!-- 掃描 -->

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

????????<!-- 四個角 -->

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

????????<!-- 拍照的地方 -->

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

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

<video class="capture" ?width="100%" height="100%" src=""></video>

<img id='img_use' style="display: none" src=''/>

????????</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="play"><img src="__PUBLIC__/home/car/images/play.png"></div> -->

????<!-- 視頻播放彈窗 -->

????<!-- <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">

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

<div class="img-box">

<img id='img' width="100%" height="100%" src=''>

</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>


<script type="text/javascript">

//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>


向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
三穗县| 鹿邑县| 玉龙| 北流市| 普兰县| 聂拉木县| 新宾| 伊金霍洛旗| 平乐县| 芦溪县| 扬州市| 河北区| 剑川县| 磐安县| 彩票| 萨嘎县| 萝北县| 五台县| 兴山县| 额尔古纳市| 渭源县| 永嘉县| 眉山市| 交口县| 胶南市| 从化市| 白河县| 彭阳县| 依安县| 金乡县| 德昌县| 普兰县| 红原县| 广安市| 靖西县| 雷山县| 荥经县| 郧西县| 县级市| 韶山市| 柘荣县|