如何通過html5調用攝像頭拍照

ios拍照默認是旋轉的，有個exif的插件是專門解決這個問題的。js版連接:?網頁鏈接，里面有使用教程。通過這個判斷照片的旋轉角度之后，可以把它旋轉過來再保存，教程：網頁鏈接。如果只有預覽需求，直接旋轉容器進行顯示也是可以的。

創新互聯建站技術團隊十年來致力于為客戶提供成都網站設計、成都做網站、外貿網站建設、品牌網站設計、成都營銷網站建設、搜索引擎SEO優化等服務。經過多年發展，公司擁有經驗豐富的技術團隊，先后服務、推廣了數千家網站，包括各類中小企業、企事單位、高校等機構單位。

手機瀏覽器怎么支持html5拍照

最近在做一個公司的保險信息處理系統項目，開發微信端瀏覽器訪問的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就可以，可以在手機上測試一下。

如何用HTML5實現拍照功能

//簡單實例?用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

名稱欄目：html5拍照,html5拍照上傳服務器
鏈接分享：http://vcdvsql.cn/article2/dsdjioc.html

成都網站建設公司_創新互聯，為您提供網頁設計公司、App設計、網站策劃、網站設計、外貿網站建設、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯