调用电脑摄像头拍照及下载

最新推荐文章于 2024-04-16 09:02:23 发布

流浪大叔

最新推荐文章于 2024-04-16 09:02:23 发布

阅读量1.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36311091/article/details/80596628

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将canvas获取的图片下载到本地</title>
</head>
<body>
<style>
    video, canvas {
        outline: 1px solid red;
    }
</style>
<p>这里通过拍照来获取你的图像，然后将其下载到本地。如果开启摄像头时有提示，请点击允许</p>
<button οnclick="startVideo()">点击启用摄像头</button>
<button οnclick="Shoot()">点击拍照</button>
<button οnclick="download()">点击下载</button>
<br>
<p>左侧是摄像头当前拍摄中区域，右侧图片是已拍摄的图像，下载的内容是右边已拍摄的图像</p>
<video width="640" height="480" autoplay></video>
<canvas width="640" height="480"></canvas>

<script>
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');

    //启用摄像头，开始拍摄
    function startVideo() {
        // video捕获摄像头画面
        navigator.mediaDevices.getUserMedia({
            video: true,
        }).then(success).catch(error)

        function success(stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }

        function error(err) {
            alert('video error: ' + err)
        }
    }


    function Shoot() {
        var context = canvas.getContext('2d');
        //把当前视频帧内容渲染到画布上
        context.drawImage(self.video, 0, 0, 640, 480);
    }

    //将图片下载到本地
    function download() {
        var dom = document.createElement("a");
        dom.href = this.canvas.toDataURL("image/png");
        dom.download = new Date().getTime() + ".png";
        dom.click();
    }
</script>

</body>
</html>

流浪大叔

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
调用电脑摄像头拍照及下载

代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;将canvas获取的图片下载到本地&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&a
复制链接

扫一扫

专栏目录