JS调用摄像头拍照，上传图片并显示到前端页面

本文实例为大家分享了JS实现截取视频画面的具体代码，供大家参考，具体内容如下：

index.jsp
展示界面，按钮点击拍照，将拍照图片显示

<img id="showImage_img1" class="showBigImg pic" style="display:none;height:150px;width: 100%;" alt="暂无">
<input type="hidden" class="u-input" id="imageUrl_img1" name="img1" v-model="userInfo.img1">
<input title="上传照片" type="button" id="img1" onclick="toPhoto('img1')">

index.js
点击按钮跳转到拍照界面，回调函数将图片地址传回显示

function toPhoto(code) {let url = contextPath + "/user/addUser/toPhoto.html?code=" + code;// 打开拍照界面，回调图片URLopenDialog("Photo", "拍照", url, 980, 622, true, (o) => {if (o != null && o.imgUrl != null && o.imgUrl != undefined) {let code = o.code;let url = o.imgUrl;// 显示图片$("#showImage_" + code).prop("src", url).show();$("#imageUrl_" + code).val(url);}}, false);
}

拍照界面 photo.jsp

<div style="text-align: center;padding-top: 20px;"><video id="video" width="800px" height="400px" autoplay="autoplay"></video>
</div>
<div style="float: right;padding-top: 20px"><canvas id="canvas" width="400px" height="400px"></canvas>
</div>
<button class="noprint u-btn success" onclick="myPhoto()">拍照</button>
<button class="noprint u-btn texture dark" onclick="closeDialog('Photo')">取消</button><script>// 回调对象设置let o;$(function () {window.dialogReady = function (dialog, options) {o = options;};})let code = document.getElementById("code").value;// 图片上传地址let baseImgUrl = "https://xxxx";//获得video摄像头区域let video = document.getElementById("video");window.onload = function () {getMedia();}// 开启摄像头function getMedia() {let constraints = {video: {width: 500, height: 500},audio: true};let promise = navigator.mediaDevices.getUserMedia(constraints);promise.then(function (MediaStream) {video.srcObject = MediaStream;video.play();}).catch(function (PermissionDeniedError) {console.log(PermissionDeniedError);});};// 将base64转换为blobfunction dataURLtoFile(dataURI, type) {let binary = atob(dataURI.split(',')[1]);let array = [];for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], {type: type});}// 照片处理function myPhoto() {//获得Canvas对象let canvas = document.getElementById("canvas");let ctx = canvas.getContext('2d');// var image = new Image(); //定义一个图片对象// image.src = 'imgs/img.jpg';// image.onload = function () { // 此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效// 截取视频图像ctx.drawImage(video, 0, 0, 500, 500);// 处理拍照图片,获取图片base64显示数据let imgUrl = canvas.toDataURL();let blob = dataURLtoFile(imgUrl, 'image/jpeg');let formData = new FormData();let fileOfBlob = new File([blob], new Date() + '.jpg'); // 重命名了formData.append("fileId", fileOfBlob);$.ajax({url: baseImgUrl + "img-api/api/upload/uploadImage", //用于文件上传的服务器端请求地址dataType: 'json',type: 'POST',async: false,data: formData,processData: false, // 使数据不做处理contentType: false, // 不要设置Content-Type请求头success: function (r) { //服务器成功响应处理函数if (r.state) {var data = r.result;var url = baseImgUrl + data[0]if (url != null && url != "") {// 设置回调图片地址o.imgUrl = url;o.code = code;// 关闭摄像头// let mediaStreamTrack = video.srcObject;// mediaStreamTrack.getTracks().forEach(function(track) {//     track.stop();// });closeDialog('Photo');}} else {message("错误", "上传失败");}}});// }}
</script>

其他js事件 andyui.js
closeDialog openDialog

/*** 关闭窗口* * @param dlgId 对话框ID* @param showTier 是否弹出层(默认true)*/
function closeDialog (dlgId) {$(document).an_dialog('close', dlgId);
}/*** 打开窗口* * @param dlgId 对话框ID* @param title 标题* @param url 展示内容的链接* @param width 窗口宽度* @param height 窗口长度* @param modalval* @param onClose 关闭对话框时的回调函数*/
function openDialog(dlgId, title, url, width, height, modalval, onClose) {$(document).an_dialog({title : title,id : dlgId,width : width || 900,height : height || 700,modalval : modalval === undefined ? true : modalval,url : url,onClose : onClose});
}

JS调用摄像头拍照，上传图片并显示到前端页面相关推荐

h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
微信js调用摄像头拍照上传_微信JSSDK实现打开摄像头拍照再将相片保存到服务器...
在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传图片接口(uploadImage) 参考资料: ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
Html5调用摄像头拍照
Html5调用摄像头拍照,ArcSort头像识别. 背景: 用户需要统一采集头像传入系统,利用ArcSort识别头像知道绑定的用户,完成后续业务. 使用相关:HTML,JS,Spring Boot/C ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...

JS调用摄像头拍照，上传图片并显示到前端页面

JS调用摄像头拍照，上传图片并显示到前端页面相关推荐

最新文章

热门文章