需要加載cordova.js
創(chuàng)新互聯(lián)從2013年創(chuàng)立,先為沙河口等服務(wù)建站,沙河口等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為沙河口企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
方法:
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('加載照相機(jī)出錯!' + 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
});
}
需要加載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('加載照相機(jī)出錯!' + 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
});
}
h2?class="title-detail"??
圖片描述??
/h2??
input?type="hidden"?id="picIndex"?value="0"??
div?id='image-list'?class="row?image-list"??
!--?input?id="upload_image"?type="file"?name="image"?accept="image/*"?/?--??
div?class="image-item?space"?onclick="showActionSheet()"??
div?class="image-up"/div??
/div??
/div
function?showPics(url,name){??????????
//根據(jù)路徑讀取到文件???
plus.io.resolveLocalFileSystemURL(url,function(entry){??
entry.file(?function(file){??
var?fileReader?=?new?plus.io.FileReader();??
fileReader.readAsDataURL(file);??
span?style="white-space:pre"???/span???fileReader.onloadend?=?function(e)?{??
var?picUrl?=?e.target.result.toString();??
var?picIndex?=?$("#picIndex").val();??
var?nowIndex?=?parseInt(picIndex)+1;??
$("#picIndex").val(nowIndex);??
var?html?=?'';??
html?+=?'div?class="image-item?"?id="item'+nowIndex+'"';??
html?+=?'div?class="image-close"?onclick="delPic('+nowIndex+')"X/div';??
html?+=?'divimg?src="'+picUrl+'"?class="upload_img"?style="width:100%;height:100%;"http://div';??
html?+=?'/div';??
html?+=?$("#image-list").html();??
$("#image-list").html(html);???
span?style="white-space:pre"???/span}??
});??
});???
}??
//壓縮圖片????
function?compressImage(url,filename){????
var?name="_doc/upload/"+filename;??
plus.zip.compressImage({????
src:url,//src:?(String?類型?)壓縮轉(zhuǎn)換原始圖片的路徑????
dst:name,//壓縮轉(zhuǎn)換目標(biāo)圖片的路徑????
quality:40,//quality:?(Number?類型?)壓縮圖片的質(zhì)量.取值范圍為1-100????
overwrite:true//overwrite:?(Boolean?類型?)覆蓋生成新文件????
},????
function(zip)?{??
//頁面顯示圖片??
showPics(zip.target,name);??
},function(error)?{????
plus.nativeUI.toast("壓縮圖片失敗,請稍候再試");????
});????
}???
//調(diào)用手機(jī)攝像頭并拍照??
function?getImage()?{????
var?cmr?=?plus.camera.getCamera();????
cmr.captureImage(function(p)?{????
plus.io.resolveLocalFileSystemURL(p,?function(entry)?{????
compressImage(entry.toLocalURL(),entry.name);????
},?function(e)?{????
plus.nativeUI.toast("讀取拍照文件錯誤:"?+?e.message);????
});????
},?function(e)?{????
},?{????
filter:?'image'???
});????
}??
//從相冊選擇照片??
function?galleryImgs()?{????
plus.gallery.pick(function(e)?{????
var?name?=?e.substr(e.lastIndexOf('/')?+?1);??
compressImage(e,name);??
},?function(e)?{????
},?{????
filter:?"image"????
});????
}??
//點(diǎn)擊事件,彈出選擇攝像頭和相冊的選項(xiàng)??
function?showActionSheet()?{????
var?bts?=?[{????
title:?"拍照"????
},?{????
title:?"從相冊選擇"????
}];????
plus.nativeUI.actionSheet({????
cancel:?"取消",????
buttons:?bts????
},????
function(e)?{????
if?(e.index?==?1)?{????
getImage();????
}?else?if?(e.index?==?2)?{????
galleryImgs();????
}????
}????
);????
}
首先是html代碼,很簡單,就是給一個添加按鈕,點(diǎn)擊觸發(fā)事件
其次方法共分為5個方法 看第二段JS代碼
你給的網(wǎng)頁用的是 input accept="image/*" type="file",在IOS端點(diǎn)擊時會提示選擇圖片或相機(jī),安卓端要看瀏覽器對這兩個屬性的優(yōu)化,部分瀏覽器會直接跳轉(zhuǎn)到資源管理器,優(yōu)化做得好的可以直接提示選擇相冊或相機(jī)。
移動設(shè)備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動設(shè)備上先擁有某些功能和相應(yīng)的API,但慢慢的,這些API會出現(xiàn)在桌面電腦上。其中一個應(yīng)用接口技術(shù)就是getUserMedia API,它能讓應(yīng)用開發(fā)者訪問用戶的攝像頭或內(nèi)置相機(jī)。