需要加載cordova.js
為西夏等地區(qū)用戶提供了全套網頁設計制作服務,及西夏網站建設行業(yè)解決方案。主營業(yè)務為做網站、成都網站制作、西夏網站設計,以傳統(tǒng)方式定制建設網站,并提供域名空間備案等一條龍服務,秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
方法:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
//相冊
function fromCamera()
{
var source = pictureSource.PHOTOLIBRARY;
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
if (source == pictureSource.CAMERA)
alert('加載照相機出錯!' + message);
else
alert('加載相冊出錯!' + message);
}, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照
function EditImgPz()
{
navigator.camera.getPicture(function (imageData) {
setimg(imageData);
}, function (message) {
alert(message);
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
});
}
HTML5新特性如下:
1、脫機緩存。您可以在關閉瀏覽器并再次打開時還原數(shù)據(jù),以減少網絡流量。
2、音頻和視頻可以自由嵌入,多媒體形式更加靈活。
3、地理位置。地理位置定位使得定位導航不再是專屬導航軟件,地圖也不需要下載很大的地圖包。它可以通過緩存、去哪里、去哪里以及更靈活的方式來解決。
4、畫布繪制提高了移動平臺的繪制能力。canvas API可以用來繪制一個簡單的熱點地圖來收集用戶體驗數(shù)據(jù),并支持對圖像的移動、旋轉、縮放等常規(guī)編輯。
5、豐富的互動方式。提高交互能力:拖動、撤消歷史操作、文本選擇等。
6、與原生app相比,開發(fā)維護成本低。降低開發(fā)和維護成本;?使頁面更小,減少用戶不必要的開銷;性能更好,功耗更低。
7、CSS3視覺設計師的輔助利器支持。CSS3支持字體嵌入、布局和最令人印象深刻的動畫功能。
8、HTML5調用相機、相冊和通訊錄的功能。
擴展資料:
2014年10月29日,萬維網聯(lián)盟宣布,HTML第五次重大修訂,經過近8年的努力,標準規(guī)范終于完成。HTML5旨在支持移動設備上的多媒體。引入了新的語法特性來支持這一點,如視頻、音頻和畫布標記。HTML5還引入了一些新功能,這些功能可以真正改變用戶與文檔交互的方式,包括增強靈活性的新解析規(guī)則、新屬性、過時或冗余屬性等。
在瀏覽器中打開攝像頭,使用它navigator.getUserMedia根據(jù)不同瀏覽器獲取攝像頭對象,這時候需要授權打開攝像頭//獲取攝像頭對象
“navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;navigator.getUserMedia({video:true,audio: true},gotStream,noStream);//”打開攝像頭。
打開攝像頭,并將攝像頭實時流輸出到瀏覽器中
!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/title
/headbody
video id="video" width="1024" height="800" autoplay/video
button id="snap"截圖/button
canvas id="canvas" width="1024" height="800"/canvas
script type="text/javascript"
var video = document.getElementById("video");
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//獲取攝像頭對象
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
navigator.getUserMedia({video:true,audio: true},gotStream,noStream);//打開攝像頭
//成功打開攝像頭
function gotStream(stream){video.src =URL.createObjectURL(stream);
video.onerror= function(){stream.stop();
}stream.onended = noStream;
video.onloadedmetadata =function(){alert("成功打開攝像頭")};
}//打開攝像頭失敗
function noStream(error){alert(error)}
document.getElementById("snap").addEventListener("click",function(){
context.drawImage(video,0,0,1024,800)});
/script/body/html
? ? ? ?
獲取攝像頭快照,可以實現(xiàn)在網頁找照相的功能將攝像頭內容繪制到網頁上document.getElementById("snap").addEventListener("click",function(){context.drawImage(video,0,0,1024,800)});即可關閉。