html5在线拍照,js html5 调用摄像头拍照
.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;
}
请将行车证正面有效放置在方框内
车险自助查询一体机
![](__PUBLIC__/home/car/images/close.png)
- 提交
- 重拍
//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);
}
});
};
});
}
})
html5在线拍照,js html5 调用摄像头拍照相关推荐
- jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
- js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
- Android Camera相机开发示例、Android 开发板 USB摄像头采集、定期拍照、定时拍照,安卓调用摄像头拍照、Android摄像头预览、监控,USB摄像头开发、摄像头监控代码
我们有个需求,在机器上加个摄像头,定时拍照: 我到网上搜索,发现没有快速上手和简单使用的: 个人感觉,大部分博客写得很乱,或者长篇大论: 而我只想简单实现功能,并不打算学习多少理论: 下面代码是我写来 ...
- android摄像头拍照代码,Android调用摄像头拍照开发教程
现在很多应用中都会要求用户上传一张图片来作为头像,首先我在这接收使用相机拍照和在相册中选择图片.接下来先上效果图: 接下来看代码: 1.布局文件: xmlns:tools="http://s ...
- Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
- HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
- h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢 项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
- vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
- JavaFX调用摄像头拍照
JavaFX初体验 初谈JavaFx 普通页面的实现 JavaFX调用摄像头拍照 安装Scene Builder 背景: 最近有做一个web项目用JavaFx做成客户端的需求,从第一次听说JavaFx ...
- vue中调用摄像头拍照,并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作 内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
最新文章
- linux 性能 管理 与 优化
- Airflow安装部署
- Mock Server
- ajax的url可以用变量吗6,如何使用变量设置 Ajax Url
- php strtoup,PHP 7 的几处函数安全小变化
- 设定Word段落的背景色
- Dubbo 需求、架构、使用Demo
- macOS开启内建的TFTP服务器
- Visual C++ 2008入门经典 第十章标准模板库(二)
- 磁盘阵列(RAID)-很详细的介绍
- Arch Linux freemind中文乱码
- 国家/地区 语言代码缩写
- JavaScript基础大总结
- TCP/IP协议五:HTTP协议详解
- NC65自定义参照 开发
- 【测试】兼容性测试云真机测试平台
- AMH主机面板实现伪静态规则教程
- mysql2008jar包下载_sqljdbc.jar2008
- windows常用快捷键(截图,录屏,放大镜,虚拟桌面,写字板,资源管理器快捷键)
- java输出到空心三角形_java经典算法_019打印三角形(空心,实心) | 学步园