jshtml5调用摄像头拍照
在云溪等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、成都网站制作 网站设计制作按需网站设计,公司网站建设,企业网站建设,成都品牌网站建设,网络营销推广,外贸营销网站建设,云溪网站建设费用合理。
.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;
}
请将行车证正面有效放置在方框内
//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);
}
});
};
});
}
})
标题名称:jshtml5调用摄像头拍照
标题URL:http://cdiso.cn/article/podgco.html