html5怎樣調用手機攝像頭或者相冊？

先簡單的添加需要的控件

成都創新互聯-專業網站定制、快速模板網站建設、高性價比象山網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式象山網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋象山地區。費用合理售后完善，十載實體公司更值得信賴。

video id="video" autoplay=""style='width:640px;height:480px'/video

button id='picture'PICTURE/button

canvas id="canvas" width="640" height="480"/canvas

并在script中定義

var video = document.getElementById("video");

var context = canvas.getContext("2d")

var errocb = function () {

console.log('sth wrong!');

}

然后，簡單的說就是利用html5的api navigator.getUserMedia來開啟設備的攝像頭，瀏覽器上會出現圖示中的提示

if (navigator.getUserMedia) { // 標準的API

navigator.getUserMedia({ "video": true }, function (stream) {

video.src = stream;

video.play();

}, errocb);

} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API

navigator.webkitGetUserMedia({ "video": true }, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errocb);

}

網上有些例子中，navigator.getUserMedia第一個參數是‘video’，這可能是早期的版本，現在必須是obj

還有關于getUserMedia和webkitGetUserMedia 的判斷，網上有這么寫的

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

但要注意，他們綁定video.src的方法不一樣，偶沒有測過createObjectURL是否通用

拍照功能就是簡單的調用canvas中的drawImage即可

document.getElementById("picture").addEventListener("click", function () {

context.drawImage(video, 0, 0, 640, 480);

});

html5 如何調用手機相冊

需要加載cordova.js

方法：

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或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片

1、實現頭的方法代碼。

2、編寫CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結果如下。

注意事項：

JavaScript是一種網絡腳本語言，在web應用開發中得到了廣泛的應用，它經常被用來為網頁添加各種動態功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現自己的功能。

html5移動端調用手機相冊和相機

需要加載cordova.js

方法：

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相冊手機,相冊系統html5
轉載注明：http://vcdvsql.cn/article10/dsdjcgo.html

成都網站建設公司_創新互聯，為您提供虛擬主機、品牌網站制作、外貿建站、面包屑導航、App開發、

廣告

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