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

您所在的位置：网站首页 › 原神电脑如何拍照上传照片 › 【精选】JS调用摄像头拍照，上传图片并显示到前端页面

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

2023-11-05 10:14| 来源: 网络整理| 查看: 265

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

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

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

拍照界面 photo.jsp

拍照取消 // 回调对象设置 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 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("错误", "上传失败"); } } }); // } }

其他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调用摄像头拍照，上传图片并显示到前端页面

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

今日新闻

推荐新闻