html5怎樣調(diào)用手機攝像頭或者相冊？

先簡單的添加需要的控件

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

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來開啟設(shè)備的攝像頭，瀏覽器上會出現(xiàn)圖示中的提示

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);

}

網(wǎng)上有些例子中，navigator.getUserMedia第一個參數(shù)是‘video’，這可能是早期的版本，現(xiàn)在必須是obj

還有關(guān)于getUserMedia和webkitGetUserMedia 的判斷，網(wǎng)上有這么寫的

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

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

拍照功能就是簡單的調(diào)用canvas中的drawImage即可

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

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

});

html5 如何調(diào)用手機相冊

需要加載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調(diào)用手機的攝像頭拍照上傳以及調(diào)用手機相冊選取照片

1、實現(xiàn)頭的方法代碼。

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

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結(jié)果如下。

注意事項：

JavaScript是一種網(wǎng)絡(luò)腳本語言，在web應(yīng)用開發(fā)中得到了廣泛的應(yīng)用，它經(jīng)常被用來為網(wǎng)頁添加各種動態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現(xiàn)自己的功能。

html5移動端調(diào)用手機相冊和相機

需要加載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相冊手機,相冊系統(tǒng)html5
轉(zhuǎn)載注明：http://www.rwnh.cn/article10/dsdjcgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、品牌網(wǎng)站制作、外貿(mào)建站、面包屑導(dǎo)航、App開發(fā)、

廣告

聲明：本網(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)