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

样式-定义取相框的大小

<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

<script>(function () {//封装一个统一获取元素的方法const $ = (select) => {let arr = [];for (let el of Array.from(document.querySelectorAll(select))) {if (el instanceof HTMLElement)arr.push(el)}return arr;}//定义一个相机类class Camera {constructor(width = 500, height = 500) {this.height = height;this.width = width;this.video = $('#video')[0];this.config = {audio: true, video: { width: 500, height: 500 }};this.canvas = $('#canvas')[0];}//打开相机openCamera() {navigator.mediaDevices.getUserMedia(this.config).then(res => {this.video.srcObject = res;this.video.play();}).catch(err => {alert('打开相机失败')})}//照相功能 使用canvas生成一个图片takePhoto() {let ctx = this.canvas.getContext('2d');ctx.drawImage(this.video, 0, 0, this.config.video.width, this.config.video.height);}//下载图片handleDownLoad() {let aElement = document.createElement('a');aElement.href = this.canvas.toDataURL('image/png');aElement.download = '测试照片';document.body.append(aElement);aElement.click();document.body.removeChild(aElement)}}let camera = new Camera();//打开相机$('#openCamera')[0].onclick = () => {camera.openCamera()};//照相$('#takePhoto')[0].onclick = () => {camera.takePhoto()};//下载$('#download')[0].onclick = () => {camera.handleDownLoad()};})()</script>

前端菜鸟，欢迎各位大佬提意见~

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

python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
原生js 调用电脑摄像头完成拍照
原生js 调用电脑摄像头完成拍照人脸登录新发版1.0x 免费开源,保姆级别教程人脸登录地址 1 ,完成拍照后可转换成base64码,你可以对当前base64码进行操作,当初我就利用这个功能点完成前端 ...
php安卓浏览器调用相机拍照,浏览器调用相机进行拍照
需求浏览器调用相机进行拍照代码 mediaDevices.getUserMedia() 目前,浏览器已经提供了一种API能够直接访问用户的媒体设备(摄像头.麦克风),这就使得浏览器能够直接捕获到来 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
html 调用微信扫一扫,JS 调用微信扫一扫功能
1.第一步: 设置调用微信js安全域名,就可以在该域名下调用微信的js接口 2.第二步: 将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[] 3.第三步: 后台获取签名代码: p ...
摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
android 打开相机拍照功能吗,Android调用相机实现拍照功能
引言在Android开发中相信大家都会遇到修改用户头像的问题,用户信息常常包含用户头像,一般流程为:默认头像-->用户修改(拍照/相册选择)-->保存头像图片. 本期我们就来实现调用系统 ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...

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

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

最新文章

热门文章