HTML5调用手机相机拍照

前端调用手机相机拍照

实现方式常见有两种:

一种是通过video控件,通过捕获video的流,截取video中的图像实现拍照,

还有一种是通过input[file]控件调用移动端的摄像头,实现拍照。

两种方法各有利弊,第一种可以实现对拍照界面的重写(比如添加拍照界面的遮罩层提示框等)

但是,第一种方式在IPhone环境下不兼容,不能使用。

第二种方式实际上是调用input[type=‘file‘],会弹出一个选择框让用户选择是调用相机还是调用相册,

好处就是兼容优于上一种,不好的地方就是这种方法无法控制拍照,想要在移动端实现只能拍照不能选择照片或者在拍照界面添加引导遮罩层的方法是行不通了。

这里说一下第二种方式的实现方式:

首先在页面上添加一个input控件实现调用相机。

<input id="takepicture" type="file" accept="image/*" capture="camera" style="display: none">

自定义方式调用相机:

var takePictureOnclick = function(){
    var takePicture = document.getElementById(‘takepicture‘);
    ... // 添加需要处理的代码
    takePicture.click();
}

然后在js中添加对这个input的onchange事件,监听拍完照之后获取照片的流。

 1 // 监听照片拍摄,并获取照片流
 2 var takePicture = document.getElementById(‘takepicture‘);
 3 var takePictureUrl = function () {
 4     takePicture.onchange = function (event) {
 5         var files = event.target.files, file;
 6         if (files && files.length > 0) {
 7             file = files[0];
 8             try {
 9                 var URL = window.URL || window.webkitURL;
10                 var blob = URL.createObjectURL(file);  // 获取照片的文件流
11                 compressPicture(blob);  // 压缩照片
12             }
13             catch (e) {
14                 try {
15                     var fileReader = new FileReader();
16                     fileReader.onload = function (event) {    // 获取照片的base64编码
17                         compressPicture(event.target.result);  // 压缩照片
18                     };
19                     fileReader.readAsDataURL(file);
20                 }
21                 catch (e) {
22                     alert(common.MESSAGE.title.error, ‘拍照失败,请联系客服或尝试更换手机再试!‘);
23                 }
24             }
25         }26     }
27 }();

这个onchange方法中,通过两种方式捕获用户拍照完之后的照片,第一种是捕获照片的文件流(存在一定兼容性问题),如果第一种方式不兼容则使用第二种方式获取照片的base64编码(这种方式兼容性较高),保险一点,两种方式都是用。

以上,就完成了前端的调用相机并拍照的功能。



前端照片压缩处理

前端的照片压缩没有什么好的解决方案。目前有的是通过canvas的两个API实现照片的压缩处理。

实现代码:

时间: 2024-11-19 07:27:55

HTML5调用手机相机拍照的相关文章

html5调用手机相机并压缩、上传

近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑!吐槽归吐槽,但是折腾的劲头不能丢! 使用input file[camera]属性调用相机 简直So easy! <input type="file" accept="image/*;" capture="camera&q

关于html5调用手机相机(原创)

很久没写随笔了 从ios6开始,webview支持html <input type="file">标签,用来调取手机的相册和相机,但是没有权限提示,不知道是不是我写的有问题,手机对app禁用了相机,通过这个方法也能打开相机,但是不能拍照,怎么才能给用户友好的提示?之前都是系统自动提示的. 安卓webkit 好像不支持这个标签,或者是我写的有问题,看到的,知道怎么解决的也帮解决一下吧. 当然最好的办法就是,本地写好调用方法,html通过js调用本地方法,这样安卓.iOS都兼容

HTML5调用电脑摄像头拍照

前台代码: <div id="contentHolder"> <video id="video" width="320" height="320" autoplay> </video> <button id="snap" style="display:none"> 拍照</button> <canvas style=&qu

h5 实现调用系统拍照或者选择照片并预览

这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件.除非你收藏了什么好东西,或者是你收藏了什么比较旧的.需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗? 好了,咱入正题! 这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来

web HTML5 调用摄像头的代码

最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style type="text/css"> #camera { width: 640px; height: 525px; position: fixed; border: 1px solid #f0f0f0; -moz-border-radius: 4px 4px 0 0; -webkit-

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库.ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type: "POST", data:{fileData:fi

html5调用摄像头实现拍照

技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这对一个网络来说难度是极大的. 技术的进步使我们遇到了html5.下面这个简单粗暴的demo就是来完成这些功能的.直接看代码: <!DOCTYPE html> <html> <head> <title>html5调用摄像头实现拍照</title> &l

利用html5调用本地摄像头拍照上传图片[转]

利用html5调用本地摄像头拍照上传图片 html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头,在html5之前,要在浏览器获取本地摄像头只有通过插件(ActiveX,但是这种只有IE支持)或者是flash来获取(或许你没学过flash那就很坑爹了),在之后微软的silvertlight中也可以获取,但这些都比较麻烦,在html5的世界里,要获取本地摄像头,只要配合js就可以轻松获取.. 目前支持html5

html5调用手机摄像头,实现拍照上传功能

今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在火的不行的html5,html5中的<video>标签,并将从摄像头获得视频作为这个标签的输入来源.实现拍照功能的html5代码: <article> <style scoped> video { transform: scaleX(-1); } p { text-alig