H5实现拍照并上传

最新推荐文章于 2024-02-22 10:04:44 发布
最新推荐文章于 2024-02-22 10:04:44 发布
阅读量1.1w 收藏 3
点赞数 1
分类专栏： js知识 文章标签： html5 js
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />
    <title>测试</title>
</head>
<body>
<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
    window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),//调用canvas接口
                context = canvas.getContext("2d"),
                video = document.getElementById("video"),
                videoObj = { "video": true },
                errBack = function(error) {//错误处理
                    console.log("Video capture error: ", error.code);
                };
        if(navigator.getUserMedia) {//调用html5拍摄接口
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了
                video.play();//开始播放
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);//同上
                video.play();//同上
            }, errBack);
        }
    }, false);

    document.getElementById("snap")
            .addEventListener("click", function() {//获取拍照按钮绑定事件
                var canvans = document.getElementById("canvas"),//调用canvas接口
                        context = canvas.getContext("2d");
                context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图

                var imgData = canvans.toDataURL();//获取图片的base64格式的数据
                //这里就可以写上传服务器代码了
            });
</script>
</body>
</html>
song_de
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机端 vant 列表直接拍照, 传参 对应数据 id
懒虫的博客
06-06 196
手机端 vant 列表直接拍照, 传参 对应数据 id。
【教程】4步配置完成H5端人脸实名认证
百度大脑
04-22 5643
为方便开发者集成实名认证方案，全新发布的百度人脸实名认证SaaS端方案提供了人脸对比、活体检测、身份证识别等多项组合能力，通过权威数据源实现确保客户是“真人”且为“本人”，实现在线完成业务中的身份认证流程。 该方案配备可视化操作后台，客户可以低开发成本配置适合业务的身份核验方式，易接入、快部署、安全可靠。百度人脸实名认证SaaS端方案推出了APP端和H5端的方案，企业在控制台创建项目后，可根据业务...
h5（网页） 调用相机拍照和相册，实现图片上传功能
cvper's world !
05-03 2万+
情景描述： 一个h5或者网页中需要上传图片功能，并且这个功能可以选择本地的图片或者拍照上传； 实现方法： 我们在网页中是可以直接调用手机的相机或者上传本地图片的，也就是说，我们是有使用本地图片文件和 拍照的权限的，即便网页是在微信环境或者其他浏览器环境中，也都是可以的； ...
基于html5、JS实现的拍照上传图片
01-26
原理：调出摄像头，拍照保存到画布，将图片URi传送到后台
C# 视频多人脸识别
weixin_30781107的博客
05-02 304
上一篇内容的调整，并按 @轮回 的说法，提交到git了，https://github.com/catzhou2002/ArcFaceDemo 基本思路如下： 一、识别线程 1.获取当前图片 2.识别当前图片的人脸位置，并将结果存入列表 3.分别获取人脸的特征值并比对，并将结果存入列表 4.如果需要注册，则将需要注册的人脸特征值存入列表 二、显示线程 将当前列表的内容画到视频控件，...
Html5调用手机摄像头并实现人脸识别
热门推荐
大前端程序员的自我修养
12-03 2万+
在混合App开发中，如何在Web中调用本地摄像头并实现人脸识别功能？本文给出了一个解决方案，并给出了该方案的核心代码，其中前端使用vue，该方案适配了Android手机。
H5做人脸识别
weixin_42246483的博客
01-20 7941
H5做人脸识别，采用的商汤的SDK 公司要做一个有关交易的h5网站,我用的vue框架，其中要用人脸识别功能，app采用的是商汤的sdk，我就去扒拉文档，发现有h5的接口，哈哈，令我舒心一笑~ js部分 <div class="video_btn"> <input id="imgFile" type="file" accept="video/*" capture="camcor...
H5实现手机拍照和选择上传功能
10-15
在H5中实现手机拍照和选择上传功能是移动端网页应用中常见的需求，它极大地提升了用户体验。下面我们将详细探讨如何利用HTML5的相关API和技术来完成这一功能。 首先，我们需要理解HTML5中的`<input type="file">`...
H5 上传图片 拍照 压缩图片
11-18
在H5应用中，用户经常需要上传图片，无论是从相册选择还是直接通过摄像头拍照。这个过程涉及到多个技术环节，包括捕获图像、压缩图片、转换数据格式以及将图片文件提交到服务器。以下是对这些知识点的详细解释： 1....
H5图片压缩与上传实例
08-30
H5图片压缩与上传实例 H5图片压缩与上传实例主要为大家详细介绍了H5图片压缩与上传的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。以下是对H5图片压缩与上传实例的详细解释和知识点总结。 一、图片...
移动端利用H5实现压缩图片上传功能
08-31
总的来说，H5的Filereader、Canvas和FormData提供了强大的能力，让我们能够在前端实现图片的压缩和上传，从而提高移动端应用的性能和用户体验。通过不断优化这些步骤，我们可以实现更加高效和友好的图片上传功能。
Html5调用手机摄像头并实现人脸识别的实现
09-22
主要介绍了Html5调用手机摄像头并实现人脸识别的实现，混合App开发，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
人脸识别示例demo,后台可调用摄像头录入人脸库
01-25
自己做的人脸识别程序,调用的百度人脸识别接口,后台可调用摄像头录入人脸库,前台进行人脸比对.
H5调用本地摄像头进行照片拍摄、证件采集、可获取多个摄像头列表等
08-08
H5调用本地摄像头进行照片拍摄、证件采集如果本地连接有多个摄像头,可获取多个摄像头列表,可选择不同摄像头进行不同类型的照片采集
H5 调用人脸识别
m0_69576888的博客
10-26 608
其实这个东西就是调用户的摄像头，之后把录制的每一帧都加到 canvas 里面，再利用 标签回显出来，以下是简单实例。之后 当按钮点击时 开始录制 我这里设置了 3秒后自动停止录制 ， 并监听录制结束之后的一系列操作，也就是 ： video:{width:200,height:200} 这句代码。注意一下这个分辨率 如果你想控制最后录制完视频的大小 这个很关键。第二步 获取用户的摄像头 （ 需要用户手动确认权限 ）JavaScript 首先，找下元素。保证你的 HTML 有以下结构。
使用html5+，用plus.io进行拍照，图片等获取
各位看官欢迎来到webshao,点个赞支持下咯!
05-16 1974
html5+官网地址 使用Hbuilder开发工具开发：实现可对Android机进行控制和获取资源 说明：IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象 获取目录：常量： 应用私有资源目录，对应常量plus.io.PRIVATE_WWW，仅应用自身可读 应用私有文档目录，对应常量plus.io.PRIVATE_DOC，仅应用自身可读写 应用公共文档目录，对应常量plus.io.PUBLIC_DOCUMENTS，多应用时都可读写，常
H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5
最新发布
麦小洛
02-22 4719
H5调用公共获取图片文件方法，在android手机端，H5主要依赖Webview,这边在webview声明并重写该方法onShowFileChooser使用工具类打开相机或相册，可以两种方式安卓原生方式或者利用第三方组件库方式选中图片，返回uri列表给H5H5收到uri照片列表，并且使用前端方式展示！
人脸识别接口_人脸识别云服务
weixin_39861627的博客
10-19 588
人脸识别是一款基于服务器平台的人脸比对识别服务程序，企业可将该识别服务部署在自有服务器上（云服务器或本地服务器），部署完成后，APP端、PC客户端、web端、微信H5端等均可发送识别请求，通过Web Service接口调用该识别服务，上传人脸图像在服务器端完成识别后，返回标准XML识别结果，整个识别过程均在企业内网完成，保证数据的安全性。 人脸识别云服务是将识别核心部署在...
H5人脸活体界面分享（仅供参考）
weixin_42102798的博客
12-10 6149
HTML界面： <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="js2/jquery.min.js"></script><!--jq--&gt...
PC端 H5实现拍照并上传
06-02
要在PC端实现H5拍照并上传，可以使用HTML5的API，比如getUserMedia和canvas。以下是一个简单的示例代码： ```html <input type="file" accept="image/*" capture="camera" id="cameraInput"> <canvas id="canvas"></canvas> <script> const cameraInput = document.getElementById('cameraInput'); const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); cameraInput.addEventListener('change', () => { const file = cameraInput.files[0]; const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0, img.width, img.height); canvas.toBlob((blob) => { // 将图片文件上传到服务器 // 可以使用XMLHttpRequest或fetch API等方法 }, 'image/jpeg', 0.8); }; img.src = URL.createObjectURL(file); }); </script> ``` 这段代码首先创建了一个文件输入框，并指定了文件类型为图片，capture属性为camera表示使用摄像头拍照。当用户选择了图片文件后，代码创建一个Image对象，并将文件URL赋值给它，然后在它的onload事件中绘制图片到canvas上，并将canvas转换为Blob对象，最后可以将Blob对象上传到服务器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值