13518219792
最近在做一个公司的保险信息处理系统项目，开发微信端浏览器访问的HTML5的页面，页面中有一个input id="input" type="file"/标签，iOS直接就支持吊起相机拍照或是相册选择，但android中不支持吊起相机拍照，只能吊起相册选择，网上的帖子说是因为android屏蔽了文件上传功能还是怎么的，没看明白。此篇博文记录如何解决这一问题，使得android也可以直接吊起相机拍照。
成都创新互联专注于新晃网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供新晃营销型网站建设，新晃网站制作、新晃网页设计、新晃网站官网定制、微信小程序定制开发服务，打造新晃网络公司原创品牌,更为您提供新晃网站排名全网营销落地服务。
在查资料的之后，总结了一下用input调用相机和相册功能的方法，之前没有深入了解过，现在整理一下：
不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：
[html] view plain copy
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleHTML5页面如何在手机端浏览器调用相机、相册功能/title
/head
body
div
input type="file" accept="image/*" capture="camera"
input type="file" accept="video/*" capture="camcorder"
input type="file" accept="audio/*" capture="microphone"
/div
/body
/html
accept表示打开的系统文件目录;
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音。
如果不加上capture,则只会显示相应的，例如上述三种依次是：拍照或图库，录像或图库，录像或拍照或图库，加上capture之后不会调用图库。
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture，所以只用写成：input type="file" accept="image/*" multiple就可以，可以在手机上测试一下。
ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接: 网页链接，里面有使用教程。通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。
//简单实例 用html5 拍摄照片 平在照片上实时标注GPS 并上传到服务器 存入数据库
//需要 gumwrapper.min.js 支持
function opencam(){
//alert ("opencam");
if (cam_is_open==0){
var video_html='video id="myVideo" width="320" height="240" /video';
$("#web_cam").html(video_html);//动态加入一个video元素
$("#web_cam").show();
function showSuccess(video) {
// alert('Hey, it works! Dimensions: ' + video.videoWidth + ' x ' + video.videoHeight);
}
function showError(error) {
alert('Oops: ' + error.message);
}
gum = new GumWrapper({video: 'myVideo'}, showSuccess, showError);
gum.play();
cam_is_open=1;
$("#opencam_btn").attr("value","关闭镜头");
}else{
location.reload();
}
}
function short_cam(){
$("#photo_div").show();
$("#msg_tips").text("正在生成图片");
var now = new Date();
var cur_time=(now.getHours()10?"0":"")+now.getHours()+":";
cur_time+=(now.getMinutes()10?"0":"")+now.getMinutes()+":";
cur_time+=(now.getSeconds()10?"0":"")+now.getSeconds();
send_time=now.getFullYear()+"-"+((now.getMonth()+1)10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()10?"0":"")+now.getDate();
send_time+=" "+cur_time;
send_lon=$("#cur_lon").text();
send_lat=$("#cur_lat").text();
var video_cam=document.getElementById("myVideo");
var canvasobj=document.getElementById("photo_canvas");
var ct1=canvasobj.getContext('2d');
ct1.fillStyle="#ffffff";
ct1.fillRect(0,0,640,480);
ct1.drawImage(video_cam,0,0);
ct1.font="25px Georgia";
ct1.fillStyle="#ff4444";
ct1.fillText(send_time,10,50);
ct1.fillText("纬度："+ send_lat,10,80);
ct1.fillText("经度："+ send_lon,10,110);
var img_data=canvasobj.toDataURL("mage/png");
var imgobj=document.getElementById("cur_img");
imgobj.src=img_data;
$("#web_cam").hide();
$("#msg_tips").text("生成图片完成");
}
function reshort_photo(){
$("#photo_div").hide();
$("#web_cam").show();
}
function send_photo() {
$("#msg_tips").text("图片上传中");
var imgobj=document.getElementById("cur_img").src;
//alert (imgobj);
$.ajax({
type:"post",
url:"updategpsp.php",
async:true,
dataType:"text",
data:{img_data:imgobj,send_time:send_time,
rel_lat:rel_lat,rel_lon:rel_lon,
send_lat:send_lat,send_lon:send_lon},
success: function(msg){
if (msg=1){
$("#msg_tips").text("图片上传完毕");
alert("上传数据成功");
reshort_photo();
}else{
alert("上传数据失败！ 请重新传送");
alert(msg);
}
}
});
}
html文件
!DOCTYPE html
html lang="en"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="viewport" content="width=device-width, user-scalable=yes"
titlewebcap Test/title
style
body, html,#main_div{width: 100%;height: 100%;overflow: hidden;margin:0;}
#float_div{position: absolute;top: 5px; left:25px border-right: activeborder 1px solid;
border-top: activeborder 1px solid; border-left: activeborder 1px solid;
border-bottom: activeborder 1px solid; z-index:9999,width: 300px;height: auto;
overflow: hidden}
#web_cam{width:320px; height:240px; }
#ctrl_bar_div{width:auto; height:auto;
border:1px dotted blue; margin:0px;
padding:3px;}
.span1{background-color:#afa; }
#cur_img{width:320px; height:240px;}
#msg_tips{color:red;background-color:#afa;}
#allmap {width: auto;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
/style
script type="text/javascript" src="../js/jquery.min.js"/script
script src="./js/gumwrapper.min.js"/script
script src="../js/Float_math.js"/script
script type="text/javascript" src=";ak=自己申请的授权码"/script
script src="./js/testhtml5.js"/script
script type="text/javascript"
var gps_star=0;
var lat_offset=1.0001390158;
var lon_offset=1.0001029614;
var bm;
var old_Position;
var cur_marker;
var prive_position;
var cam_is_open=0; //记录镜头的打开状态 ， 默认为没有开 状态=0
var gum;
var send_time="";
var send_lat="";
var send_lon="";
var rel_lat="";
var rel_lon="";
var cur_offset_zt=0;
//alert (cur_marker);
$(document).ready(function() {
drawbaiduMap();
bm.centerAndZoom("东莞",18);
});
/script
/head
body
div id="main_div"
div id="allmap"/div
/div
div id="float_div"
div id="ctrl_bar_div"
span class="span1" 纬度：/span
span class="span1" id="cur_lat" 000.000000 /span
span class="span1" 经度：/span
span class="span1" id="cur_lon" 000.000000 /span
input id="is_ver_off_set" type="button" onclick="ver_offset_zt()" value="校正" /
br
input id="gps_btn" type="button" value="开\关GPS" onclick="getLocation()"/
input id="opencam_btn" type="button" value="打开镜头" onclick="opencam()"/
span id="msg_tips"GPS状态：关闭span
/div
div id="web_cam" style="display:none" onclick="set_timeout_short()"
/div
div id="photo_div" style="display:none"
div id="send_btn_div"
input id="res_hort_btn" type="button" value="重拍" onclick="reshort_photo()"/
input id="send_photo_btn" type="button" value="发送" onclick="send_photo()"/
input id="canc_btn" type="button" value="取消" onclick="can_photo()"/
/div
div id="canvas_div" style="display:none"
canvas id="photo_canvas" width="640" height="480"
"不支持"
/canvas
/div
div id="img_div"
img id="cur_img"/
/div
/div
/div
/body
/html
