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; // 打开拍照界面,回调图片URL openDialog("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转换为blob function 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 }); }