前端调用手机相机拍照

最新推荐文章于 2024-02-06 14:39:13 发布

fengye12zjs

最新推荐文章于 2024-02-06 14:39:13 发布

阅读量1.6w

点赞数 1

文章标签：相机相册手机端

转载地址

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实现照片的压缩处理。

解决兼容性需要用到两个插件：

点击这里

实现代码：

 1 var compressPicture = function (blob) {
 2   var quality = 0.5, image = new Image();
 3   image.src = blob;
 4   image.onload = function () {
 5     var that = this;
 6     // 生成比例
 7     var width = that.width, height = that.height;
 8     width = width / 4;
 9     height = height / 4;
10     // 生成canvas画板
11     var canvas = document.createElement('canvas');
12     var ctx = canvas.getContext('2d');
13     canvas.width = width;
14     canvas.height = height;
15     ctx.drawImage(that, 0, 0, width, height);
16     // 生成base64,兼容修复移动设备需要引入mobileBUGFix.js
17     var imgurl = canvas.toDataURL('image/jpeg', quality);
18     // 修复IOS兼容问题
19     if (navigator.userAgent.match(/iphone/i)) {
20       var mpImg = new MegaPixImage(image);
21       mpImg.render(canvas, {
22         maxWidth: width,
23         maxHeight: height,
24         quality: quality
25       });
26       imgurl = canvas.toDataURL('image/jpeg', quality);
27     }
28     // 上传照片
29     uploadPicture(imgurl);
30   };
31 };

标签: HTML5, 调用相机, 拍照, 压缩

好文要顶关注我收藏该文

一笔风尘
关注 - 1
粉丝 - 0

+加关注

« 上一篇： JQuery 1.8.3对IE9兼容问题getAttribute
» 下一篇： gulp 配置自动化前端开发

posted on 2015-09-11 11:55 一笔风尘阅读(285) 评论(0) 编辑收藏

刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请登录或注册，访问网站首页。

最新知识库文章:

· 高质量的工程代码为什么难写
· 循序渐进地代码重构
· 技术的正宗与野路子
· 陈皓：什么是工程师文化？
· 没那么难，谈CSS的设计模式

» 更多知识库文章...

fengye12zjs

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
前端调用手机相机拍照

转载地址 HTML5调用手机相机拍照前端调用手机相机拍照实现方式常见有两种：一种是通过video控件，通过捕获video的流，截取video中的图像实现拍照，还有一种是通过input[file]控件调用移动端的摄像头，实现拍照。两种方法各有利弊，第一种可以实现对拍照界面的重写（比如添加拍照界面的遮罩层提示框等）但是，第一种方式在IPhone环境下不兼容，
复制链接

扫一扫