前端js调用相机实现拍照，下载照片功能

最新推荐文章于 2024-09-11 14:07:35 发布

来份煎饼不加果子

最新推荐文章于 2024-09-11 14:07:35 发布

阅读量1.6k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/fgndsg/article/details/127109892

版权

本文介绍如何在前端使用JavaScript实现调用设备相机进行拍照，并完成照片的预览与下载功能，适合前端初学者参考。

摘要由CSDN通过智能技术生成

样式-定义取相框的大小

<style>
        .camera_vedio,
        canvas,
        img {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 5px;

        }
    </style>

HTML

<body>
    <div class="camera">
        <div class="vedio_container">
            <video class="camera_vedio" id="video"></video>
            <canvas class="canvas" id="canvas" width="500" height="500"></canvas>
        </div>
        <button id="openCamera">打开摄像头</button>
        <button id="takePhoto">照相</button>
        <button id="download">下载</button>
    </div>
</body>

javascript