JavaScript调用摄像头拍照上传图片

设备：USB摄像头

HTML代码：

<!doctype html>
<html lang="en">
<head>
    <title>upload picture</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div>
    <button onclick="openMedia()">开启摄像头</button>
    <button onclick="takePhoto()">拍照</button>
    <button id="uploadPhoto">上传</button>
    <button onclick="closeMedia()">关闭摄像头</button>
</div>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>

<script>
    let mediaStreamTrack = null; // 视频对象(全局)
    function openMedia() {
        let constraints = {
            video: {width: 500, height: 500},
            audio: true
        };
        //获得video摄像头
        let video = document.getElementById('video');
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then((mediaStream) => {
            mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
            video.srcObject = mediaStream;
            video.play();
        });
    }

    // 拍照
    function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
    }

    // 关闭摄像头
    function closeMedia() {
        mediaStreamTrack.stop();
    }

    // base64转File对象
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mime});
    }

    $("#uploadPhoto").on("click", function () {
        let file = dataURLtoFile(document.getElementById('canvas').toDataURL(), 'Filedata.jpg');

        var formData = new FormData();
        formData.append("file", file);

        $.ajax({
            url: 'http://127.0.0.1:8080/upload',
            dataType: 'json',
            type: 'POST',
            async: false,
            data: formData,
            processData: false, // 使数据不做处理
            contentType: false, // 不要设置Content-Type请求头
            success: function (data) {
                console.log(data);
                alert('上传成功！');

            },
            error: function (response) {
                console.log(response);
            }
        });
    });
</script>
</body>
<!-- 
// 后端
// 添加临时文件目录
@Configuration
public class MultipartConfig {
    @Bean
    MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        factory.setLocation("E:\\temp");
        return factory.createMultipartConfig();
    }
}

// 跨域
@PostMapping(value = "/upload")
@CrossOrigin
public BaseResult upload(@RequestParam("file") MultipartFile file) throws Exception {
	return BaseResult.success(file.getInputStream().available());
}

 -->

　　

posted @ 2021-03-25 20:29  c3p4501  阅读(239)  评论(0)    收藏  举报