canvas获取摄像头并拍照显示

最新推荐文章于 2023-11-25 13:18:20 发布

C++程序员Carea

最新推荐文章于 2023-11-25 13:18:20 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/calmreason/article/details/109806222

版权

Vue.js进阶教程专栏收录该内容

46 篇文章 15 订阅

订阅专栏

Vue.js进阶文章列表

<!doctype html>
<html lang="en">
    <head>
        <title>GET VIDEO</title>
        <meta charset="utf-8">
    </head>
    <body>
    <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <script>
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            //获得video摄像头区域
            let video = document.getElementById("video");
            //这里介绍新的方法，返回一个 Promise对象
            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
            // then()是Promise对象里的方法
            // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
            // 避免数据没有获取到
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                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);
      }
</script>
</body>
</html>

说明：

1 这里要注意canvas可以是隐藏的 style="display: none"

2 canvas的大小影响截图的尺寸，在标签里设置是可以的。但是用:style绑定data就是不行，尺寸不听使唤，会根据运行时大小来变化

<canvas
            ref="myCanvas"
            id="canvas_id"
            class="canvas-vi"
            style="display: none"
            width="200px"
            height="200px"
          ></canvas>

C++程序员Carea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas获取摄像头并拍照显示

Vue.js进阶文章列表<!doctype html><html lang="en"> <head> <title>GET VIDEO</title> <meta charset="utf-8"> </head> <body> <input type="button" title="开启摄像头" value="开启摄像头" onclic
复制链接

扫一扫