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事件,监听拍完照之后获取照片的流。
// 监听照片拍摄,并获取照片流
var takePicture = document.getElementById('takepicture');
var takePictureUrl = function () {
takePicture.onchange = function (event) {
var files = event.target.files, file;
if (files && files.length > 0) {
file = files[0];
try {
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file); // 获取照片的文件流
compressPicture(blob); // 压缩照片
}
catch (e) {
try {
var fileReader = new FileReader();
fileReader.onload = function (event) { // 获取照片的base64编码
compressPicture(event.target.result); // 压缩照片
};
fileReader.readAsDataURL(file);
}
catch (e) {
alert(common.MESSAGE.title.error, '拍照失败,请联系客服或尝试更换手机再试!');
}
}
}
}
27 }();
这个onchange方法中,通过两种方式捕获用户拍照完之后的照片,第一种是捕获照片的文件流(存在一定兼容性问题),如果第一种方式不兼容则使用第二种方式获取照片的base64编码(这种方式兼容性较高),保险一点,两种方式都是用。
以上,就完成了前端的调用相机并拍照的功能。
前端照片压缩处理
前端的照片压缩没有什么好的解决方案。目前有的是通过canvas的两个API实现照片的压缩处理。
解决兼容性需要用到两个插件:
实现代码:
var compressPicture = function (blob) {
var quality = 0.5, image = new Image();
image.src = blob;
image.onload = function () {
var that = this;
// 生成比例
var width = that.width, height = that.height;
width = width / 4;
height = height / 4;
// 生成canvas画板
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(that, 0, 0, width, height);
// 生成base64,兼容修复移动设备需要引入mobileBUGFix.js
var imgurl = canvas.toDataURL('image/jpeg', quality);
// 修复IOS兼容问题
if (navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: width,
maxHeight: height,
quality: quality
});
imgurl = canvas.toDataURL('image/jpeg', quality);
}
// 上传照片
uploadPicture(imgurl);
};
};
HTML5调用手机相机拍照的更多相关文章
- html5调用手机相机并压缩、上传
近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传.从功能上看,原生的实现应该是最好的.毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差 ...
- 关于html5调用手机相机(原创)
很久没写随笔了 从ios6开始,webview支持html <input type="file">标签,用来调取手机的相册和相机,但是没有权限提示,不知道是不是我写的有 ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- html5调用手机摄像头
<input type="file" accept="image/*" capture="camera"><input t ...
- web HTML5 调用摄像头的代码
最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...
- h5 实现调用系统拍照或者选择照片并预览
这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的 ...
- [转]html5调用摄像头实例
原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...
- html5调用手机摄像头,实现拍照上传功能
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
- html5调用摄像头实现拍照
技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...
随机推荐
- js中原型的概念
- Breakpoint is not hit
新拿到一个Silverlight项目,能够正常运行,但是一旦运行起来,断点处由实心点变成了空心的,并警告:The breakpoint will not currently be hit. No sy ...
- 'Missing recommended icon file - The bundle does not contain an app icon for iPhone / iPod Touch of exactly '120x120' pixels, in .png format'
创建120像素的高分辨率和60个像素定期如上,苹果文档中提到,并设置名称的新图标.例如,icon-120.png和icon-152.png. 将这个图标到你的项目资源文件夹并添加该图标到项目: 在此之 ...
- poj 1384 Piggy-Bank(完全背包)
Piggy-Bank Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 10830 Accepted: 5275 Descr ...
- git 实用操作
查看某文件的某些行的变化历史: $ git log --pretty=short -u -L 2003,2005:Executor.cpp http://stackoverflow.com/quest ...
- js script中引用其他script
在需要引用目标js中引用其他js依赖项 可以使用这个方法直接在js顶部加入这一行即可 document.write("<script type='text/javascript' sr ...
- 初试Nodejs——使用keystonejs创建博客网站2(修改模板)
上一篇(初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs))讲了keystonejs的安装.安装完成后,已经具备了基本的功能,我们需要对页面进行初步修改,比如,增加 ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- Linux系统编程温故知新系列 --- 01
1.大端法与小端法 大端法:按照从最高有效字节到最低有效字节的顺序存储,称为大端法 小端法:按照从最低有效字节到最高有效字节的顺序存储,称为小端法 网际协议使用大端字节序来传送TCP分节中的多字节整数 ...
- 复制mueclipse项目到eclipse
本文适用于将MyEclipse上的项目projectA检出后重命名为projectB的情况,如果只是检出projectA到Eclipse,也可以部分参考 1.从svn上检出Myeclipse项目到Ec ...