ios拍照默認是旋轉(zhuǎn)的,有個exif的插件是專門解決這個問題的。js版連接:?網(wǎng)頁鏈接,里面有使用教程。通過這個判斷照片的旋轉(zhuǎn)角度之后,可以把它旋轉(zhuǎn)過來再保存,教程:網(wǎng)頁鏈接。如果只有預覽需求,直接旋轉(zhuǎn)容器進行顯示也是可以的。
創(chuàng)新互聯(lián)建站技術(shù)團隊十年來致力于為客戶提供成都網(wǎng)站設計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設、品牌網(wǎng)站設計、成都營銷網(wǎng)站建設、搜索引擎SEO優(yōu)化等服務。經(jīng)過多年發(fā)展,公司擁有經(jīng)驗豐富的技術(shù)團隊,先后服務、推廣了數(shù)千家網(wǎng)站,包括各類中小企業(yè)、企事單位、高校等機構(gòu)單位。
最近在做一個公司的保險信息處理系統(tǒng)項目,開發(fā)微信端瀏覽器訪問的HTML5的頁面,頁面中有一個input id="input" type="file"/標簽,iOS直接就支持吊起相機拍照或是相冊選擇,但android中不支持吊起相機拍照,只能吊起相冊選擇,網(wǎng)上的帖子說是因為android屏蔽了文件上傳功能還是怎么的,沒看明白。此篇博文記錄如何解決這一問題,使得android也可以直接吊起相機拍照。
在查資料的之后,總結(jié)了一下用input調(diào)用相機和相冊功能的方法,之前沒有深入了解過,現(xiàn)在整理一下:
不需要特殊環(huán)境,使用input標簽 type值為file,可以調(diào)用系統(tǒng)默認的照相機、相冊、攝像機、錄音功能。先上代碼:
[html]?view plain?copy
!DOCTYPE?html
html?lang="en"
head
meta?charset="UTF-8"
titleHTML5頁面如何在手機端瀏覽器調(diào)用相機、相冊功能/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表示打開的系統(tǒng)文件目錄;
capture表示的是系統(tǒng)所捕獲的默認設備,camera:照相機;camcorder:攝像機;microphone:錄音。
如果不加上capture,則只會顯示相應的,例如上述三種依次是:拍照或圖庫,錄像或圖庫,錄像或拍照或圖庫,加上capture之后不會調(diào)用圖庫。
其中還有一個屬性multiple,支持多選,當支持多選時,multiple優(yōu)先級高于capture,所以只用寫成:input type="file" accept="image/*" multiple就可以,可以在手機上測試一下。
//簡單實例?用html5?拍攝照片?平在照片上實時標注GPS?并上傳到服務器?存入數(shù)據(jù)庫
//需要?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);//動態(tài)加入一個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","關(guān)閉鏡頭");
}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("經(jīng)度:"+?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("上傳數(shù)據(jù)成功");
reshort_photo();
}else{
alert("上傳數(shù)據(jù)失?。?請重新傳送");
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=自己申請的授權(quán)碼"/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;?//記錄鏡頭的打開狀態(tài)?,?默認為沒有開?狀態(tài)=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"??經(jīng)度:/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="開\關(guān)GPS"?onclick="getLocation()"/
input?id="opencam_btn"?type="button"?value="打開鏡頭"??onclick="opencam()"/
span??id="msg_tips"GPS狀態(tài):關(guān)閉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="發(fā)送"?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
名稱欄目:html5拍照,html5拍照上傳服務器
鏈接分享:http://m.rwnh.cn/article2/dsdjioc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設計公司、App設計、網(wǎng)站策劃、網(wǎng)站設計、外貿(mào)網(wǎng)站建設、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)