html5android拍照上传
㈠ 手机浏览器怎么支持html5拍照
最近在做一个公司的保险信息处理系统项目，开发微信端浏览器访问的HTML5的页面，页面中有一个<input id="input" type="file"/>标签，iOS直接就支持吊起相机拍照或是相册选择，但android中不支持吊起相机拍照，只能吊起相册选择，网上的帖子说是因为android屏蔽了文件上传功能还是怎么的，没看明白。此篇博文记录如何解决这一问题，使得android也可以直接吊起相机拍照。
在查资料的之后，总结了一下用input调用相机和相册功能的方法，之前没有深入了解过，现在整理一下：
不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：
[html]view plain
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>HTML5页面如何在手机端浏览器调用相机、相册功能</title>
</head>
<body>
<div>
<inputtype="file"accept="image/*"capture="camera">
<inputtype="file"accept="video/*"capture="camcorder">
<inputtype="file"accept="audio/*"capture="microphone">
</div>
</body>
</html>
accept表示打开的系统文件目录;
capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音。
如果不加上capture,则只会显示相应的，例如上述三种依次是：拍照或图库，录像或图库，录像或拍照或图库，加上capture之后不会调用图库。
其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture，所以只用写成：<input type="file" accept="image/*" multiple>就可以，可以在手机上测试一下。
㈡ 如何使用HTML5实现利用摄像头拍照上传功能
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如php里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相关规范：
（为便于阅读，对原文进行了不失原意的适当修改，包括代码中一些错误的重复，并作了注释）
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。
1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’);
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream;
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’); //动态创建画布对象
var ctx=canvas.getContext(’2d’);
var cw=vw,ch=vh;
ctx.fillStyle=”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas);
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”);
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22);
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length; //atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data});
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,’w');
fwrite($fp,$image);
fclose($fp);
}
以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
㈢ 如何使用HTML5实现拍照上传应
能够在浏览器中获取摄像头与语音流媒体数据将会是件很酷的技术，随着HTML5的进一步规范与拓展，已经可以实现这个技术，这将为web开发带来新的用户体验与应用程序。 蒋宇捷在《如何使用HTML5实现拍照上传应用》 中已经对此技术进行了介绍，我也是从中得到启发的。 但是蒋先生博文中有些东西说的不够具体细化，还有些东西需要补充说明。因此，我就较为详细的介绍一下该技术，
一：运行条件
1：需要chrome 18.0及以上版本，并且需要打开about:flags启用相关功能，也可以使用支持html5的opera浏览器。
2：网页必须运行于服务器端，基于http://的。如果直接在本地磁盘中打开也是没用的，可以启用IIS服务，使用localhost:8080运行该应用。这个需要千万注意！！！
二： 视频流
HTML5推出了The Media Capture API，可以实现对摄像头的访问，关于对音频等接口的使用也可以，具体参考w3c规范。获取的视频流是通过video标签的。我们可以看看蒋先生的示例代码，但是有不完善的地方，我也会加以补充的。
[javascript] view plain print?
<video id="video" autoplay=""></video>
<script>
var video_element = document.getElementById('video');
if (navigator.getUserMedia) { // opera should use opera.getUserMedia now, chrome use webkitGetUserMedia
navigator.getUserMedia('video',success, error);
}
function success(stream) {
video_element.src =stream;
}
</script>
但是这段代码对于chrome是不行的，应为navigator.getUserMedia的值不是true,其真正的 是navigator.webkitGetUserMedia, 是chrome的一个拓展。
因此，为了能够同时支持opera和chrome,可以修改上面蒋先生的代码如下：
[javascript] view plain print?
var video = document.getElementById("video");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (navigator.getUserMedia) //
{
if (navigator.webkitURL)//
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
else //
{
navigator.getUserMedia("video", function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
}, function (error) { alert(error); });
}
}
三拍照
这需要用到<canvas>标签与方法了。
学过<canvas>对象的朋友们知道，drawImage()函数是绘制图形的，但是该函数有数十种重载方法，不仅可以绘制从网页的<img> 或者本地加载的图片 ， 还可以从video视频流中获取相应的图像数据，甚至具体到任何一帧。这方面的详细介绍可以参考w3c标准。
例如，从video中获取图片并且绘制到<canvas>画布中可以这样
[javascript] view plain print?
var con = document.getElementById("canvas");
var cxt = con.getContext("2d");
con.width=video.videoWeight;
con.height=video.videoHeight;
cxt.drawImage(video, 0, 0);
关于图片上传到服务器端我自己也还不是很懂，大家可以参考蒋先生的做法。
㈣ html5如何调用手机摄像头,实现拍照,拍视频实现上传功能
html5提供了 navigator.getUserMedia接口使用设备摄像头，chrome28上测试已经可用，手机端浏览器测试发现只有opera浏览器可用。
浏览器未完善之前可以使用PhoneGap完成，它提供了 navigator.camera.getPicture接口，使用js可以方便调用设备摄像头。
㈤ html5或者JS怎样调用手机摄像头或者相册
你给的网页用的是 <input accept="image/*" type="file">，在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。
㈥ 如何用HTML5实现拍照功能
//简单实例用html5拍摄照片平在照片上实时标注GPS并上传到服务器存入数据库
//需要gumwrapper.min.js支持
functionopencam(){
//alert("opencam");
if(cam_is_open==0){
varvideo_html='<videoid="myVideo"width="320"height="240"></video>';
$("#web_cam").html(video_html);//动态加入一个video元素
$("#web_cam").show();
functionshowSuccess(video){
//alert('Hey,itworks!Dimensions:'+video.videoWidth+'x'+video.videoHeight);
}
functionshowError(error){
alert('Oops:'+error.message);
}
gum=newGumWrapper({video:'myVideo'},showSuccess,showError);
gum.play();
cam_is_open=1;
$("#opencam_btn").attr("value","关闭镜头");
}else{
location.reload();
}
}
functionshort_cam(){
$("#photo_div").show();
$("#msg_tips").text("正在生成图片");
varnow=newDate();
varcur_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();
varvideo_cam=document.getElementById("myVideo");
varcanvasobj=document.getElementById("photo_canvas");
varct1=canvasobj.getContext('2d');
ct1.fillStyle="#ffffff";
ct1.fillRect(0,0,640,480);
ct1.drawImage(video_cam,0,0);
ct1.font="25pxGeorgia";
ct1.fillStyle="#ff4444";
ct1.fillText(send_time,10,50);
ct1.fillText("纬度："+send_lat,10,80);
ct1.fillText("经度："+send_lon,10,110);
varimg_data=canvasobj.toDataURL("mage/png");
varimgobj=document.getElementById("cur_img");
imgobj.src=img_data;
$("#web_cam").hide();
$("#msg_tips").text("生成图片完成");
}
functionreshort_photo(){
$("#photo_div").hide();
$("#web_cam").show();
}
functionsend_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文件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="viewport"content="width=device-width,user-scalable=yes">
<title>webcapTest</title>
<style>
body,html,#main_div{width:100%;height:100%;overflow:hidden;margin:0;}
#float_div{position:absolute;top:5px;left:25pxborder-right:activeborder1pxsolid;
border-top:activeborder1pxsolid;border-left:activeborder1pxsolid;
border-bottom:activeborder1pxsolid;z-index:9999,width:300px;height:auto;
overflow:hidden}
#web_cam{width:320px;height:240px;}
#ctrl_bar_div{width:auto;height:auto;
border:1pxdottedblue;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>
<scripttype="text/javascript"src="../js/jquery.min.js"></script>
<scriptsrc="./js/gumwrapper.min.js"></script>
<scriptsrc="../js/Float_math.js"></script>
<scripttype="text/javascript"src="http://api.map..com/api?v=2.0&ak=自己申请的授权码"></script>
<scriptsrc="./js/testhtml5.js"></script>
<scripttype="text/javascript">
vargps_star=0;
varlat_offset=1.0001390158;
varlon_offset=1.0001029614;
varbm;
varold_Position;
varcur_marker;
varprive_position;
varcam_is_open=0;//记录镜头的打开状态，默认为没有开状态=0
vargum;
varsend_time="";
varsend_lat="";
varsend_lon="";
varrel_lat="";
varrel_lon="";
varcur_offset_zt=0;
//alert(cur_marker);
$(document).ready(function(){
drawMap();
bm.centerAndZoom("东莞",18);
});
</script>
</head>
<body>
<divid="main_div">
<divid="allmap"></div>
</div>
<divid="float_div">
<divid="ctrl_bar_div">
<spanclass="span1">纬度：</span>
<spanclass="span1"id="cur_lat">000.000000</span>
<spanclass="span1">经度：</span>
<spanclass="span1"id="cur_lon">000.000000</span>
<inputid="is_ver_off_set"type="button"onclick="ver_offset_zt()"value="校正"/>
<br>
<inputid="gps_btn"type="button"value="开关GPS"onclick="getLocation()"/>
<inputid="opencam_btn"type="button"value="打开镜头"onclick="opencam()"/>
<spanid="msg_tips">GPS状态：关闭<span>
</div>
<divid="web_cam"style="display:none"onclick="set_timeout_short()">
</div>
<divid="photo_div"style="display:none">
<divid="send_btn_div">
<inputid="res_hort_btn"type="button"value="重拍"onclick="reshort_photo()"/>
<inputid="send_photo_btn"type="button"value="发送"onclick="send_photo()"/>
<inputid="canc_btn"type="button"value="取消"onclick="can_photo()"/>
</div>
<divid="canvas_div"style="display:none">
<canvasid="photo_canvas"width="640"height="480">
"不支持"
</canvas>
</div>
<divid="img_div">
<imgid="cur_img"/>
</div>
</div>
</div>
</body>
</html>
㈦ html5在安卓调用手机摄像头吗
可以的使用<input type="file" />就可以，下面是我从网上找的一段代码，你可以参考一下
<!DOCTYPE HTML>
<html>
<head>
<title>上传图片</title>
<meta charset="utf-8">
</head>
<body>
<iframe name="uploadfrm" id="uploadfrm" style="display: none;"></iframe>
<form name="formHead" method="post" action="" id="formHead" enctype="multipart/form-data" target="uploadfrm">
<div>
<div>
<input type="file" name="file_head" id="file_head" onchange="javascript:setImagePreview();" />
</div>
<div>
<div id="DivUp" style="display: none">
<input type="submit" data-inline="true" id="BtnUp" value="确认上传" data-mini="true" />
</div>
</div>
</div>
</form>
<div data-role="fieldcontain">
<div id="localImag">
<img id="preview" width="-1" height="-1" style="display: none" />
</div>
</div>
<script type="text/javascript">
function setImagePreview() {
var preview, img_txt, localImag, file_head = document.getElementById("file_head"),
picture = file_head.value;
if (!picture.match(/.jpg|.gif|.png|.bmp/i)) return alert("您上传的图片格式不正确，请重新选择！"),
!1;
if (preview = document.getElementById("preview"), file_head.files && file_head.files[0]) preview.style.display = "block",
preview.style.width = "63px",
preview.style.height = "63px",
preview.src = window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL.createObjectURL(file_head.files[0]) : window.URL.createObjectURL(file_head.files[0]);
else {
file_head.select(),
file_head.blur(),
img_txt = document.selection.createRange().text,
localImag = document.getElementById("localImag"),
localImag.style.width = "63px",
localImag.style.height = "63px";
try {
localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
localImag.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
} catch(f) {
return alert("您上传的图片格式不正确，请重新选择！"),
!1
}
preview.style.display = "none",
document.selection.empty()
}
return document.getElementById("DivUp").style.display = "block",
!0
}
</script>
</body>
</html>
㈧ 怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片
1、实现头的方法代码。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
㈨ 如何通过html5调用摄像头拍照
ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接:网页链接，里面有使用教程。通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。