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