溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
