前端调用手机相机拍照

news/2025/2/19 0:14:57/
转载地址

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
+加关注
1
0
« 上一篇: JQuery 1.8.3对IE9兼容问题getAttribute
» 下一篇: gulp 配置自动化前端开发

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

刷新评论 刷新页面 返回顶部
【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】融云发布 App 社交化白皮书 IM 提升活跃超 8 倍
【邀请】网易云渠道合作伙伴招商大会,邀您共创未来
最新IT新闻:
· 人工智能时代,亚马逊想打造另一个 Android
· 手游氪金太狠,连文化部都怒了:网游物品抽取概率必须公开!
· Firebug宣布停止开发更新
· 苹果和三星之间拖了5年的专利战,三星可能不用赔钱了
· Google是如何挑战AWS的霸主地位的
» 更多新闻...
最新知识库文章:
· 高质量的工程代码为什么难写
· 循序渐进地代码重构
· 技术的正宗与野路子
· 陈皓:什么是工程师文化?
· 没那么难,谈CSS的设计模式
» 更多知识库文章...
文章来源:https://blog.csdn.net/fengye12zjs/article/details/53504274
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/219797.html

相关文章

华为手机如何调时间显示_华为手机照相有时间日期显示怎样设置

华为手机照相有时间日期显示设置方法如下: 1、在手机界面找到图库点击打开。 2、进入图库后选择一张照片打开。 3、打开图片后、点击下图所示右上角的选项。 4、进入后会看到显示拍摄时间和拍摄地点没有打开。 5、打开“显示拍摄时间”和“显示拍摄地点”以后,再返回到图片中…

中国最大的系统软件开发外包公司排行榜有哪些

中国最大的系统软件开发外包公司排行榜有哪些   1 华盛恒辉   2 五木恒润   3 北京华盛恒辉   4 北京五木恒润   5 海尔   6 神州   7 浙大网新   8 熊猫电子  9 浪潮   10 东软 11 北大方正   12 微软   13 朝华 14 计算机软件与技术  …

计算机职业工资排名2015,2015年各行业薪酬排行榜出炉

原标题&#xff1a;2015年各行业薪酬排行榜出炉 2015年各行业薪酬排行榜出炉 会计网讯 据调查数据显示&#xff0c;2012-2014年月薪都进入34个行业前十的行业是&#xff0c;金融业、咨询与调查、广电及文化艺术业、批发业、法律服务、职业中介服务、家电及电子产品零售、计算机…

山东省计算机专业专科排名2015,2015山东专科学校排名及排行榜

原标题&#xff1a;2015山东专科学校排名及排行榜 点击查看>>> 深度推荐阅读&#xff1a; 1、 2、丨 3、丨 4、 5、 山东共有72所专科学校参与了2015山东专科学院排名&#xff0c;其中排名第一的是烟台职业学院&#xff0c;排名第二的是滨州职业学院&#xff0c;排名第…

网上开店最好卖的东西排行榜

简介&#xff1a;很多人都想在网上开店&#xff0c;但是又不知道卖什么产品&#xff1f;什么产品好卖&#xff1f;我们根据淘宝网2009年第二季度和易趣网2009年第二季度、拍拍网2009年第而季度销售情况。总结了网上销售目前销售额最大的十种产品的优劣势分析。 1.化妆品及化妆…

建议收藏 | 可实操,数据中台选型示例

在了解清楚了选择数据中台时应关注的内容后&#xff0c;CTO/CIO可以借鉴以下数据中台选型示例&#xff0c;企业选购合适的数据中台。 01 项目背景 数字化时代&#xff0c;数据已经成为企业的战略级资产。某集团把建设数字化转型作为重要发展战略&#xff0c;致力于将数字化转…

树世界设计大纲

当玩家进入这个游戏时&#xff0c;他们会被迎接进入一个奇幻而神秘的世界&#xff0c;这个世界完全建立在一棵巨大的树上。这棵树被称为“世界之树”&#xff0c;是整个游戏世界的核心。 这棵树有着巨大的树干和无数的分支&#xff0c;树枝间纵横交错&#xff0c;形成了一个庞…

韩国企业百强排行榜!

001 sec 韩国三星电子 002 hyundai-motor 韩国现代汽车公司 003 lge 韩国lg电子 004 kepco 韩国电力公司 005 samsunglife 韩国三星生命人寿保险 006 kbstar 韩国国民银行 007 posco 韩国钢铁公司 008 skcorp 韩国鲜京集团 009 kia 韩国起亚汽车 010 gscalt…