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
    });
}

创作不易，关注、点赞就是对作者最大的鼓励，欢迎在下方评论留言
求关注，定期分享Java知识，一起学习，共同成长。