在云溪等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作 網(wǎng)站設(shè)計制作按需網(wǎng)站設(shè)計,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),網(wǎng)絡(luò)營銷推廣,外貿(mào)營銷網(wǎng)站建設(shè),云溪網(wǎng)站建設(shè)費(fèi)用合理。
????
????
????
????
????
????
????
????????.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;
}
????
????
????
????????
????????
請將行車證正面有效放置在方框內(nèi)
????
????
????
????????
????????
????????
????????
????????????
????????
????
????
????
????????
????
???? 車險自助查詢一體機(jī)
????
????
????
????
????
????
????
????
????
????
//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();
//點(diǎn)擊拍照
$('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)角度,在畫布上對圖片進(jì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);
}
});
};
});
}
})
????????
????