Cordova - 使用Cordova开发iOS应用实战5（获取手机里照片，并编辑）
作者：hangge | 2016-04-21 08:35
使用Cordova可以很方便的通过js代码读取系统相簿里面的照片，同使用设备摄像头拍照一样，同样需要先添加camera插件。
一，添加camera插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令：
cordova plugin add cordova-plugin-camera可以看到camera相机插件已经成功添加了：
二，获取照片
我们可以选择是从“照片库（时刻）”中读取图片，或者从“相簿”中读取图片。
1，从“相簿”中获取照片
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
//Cordova加载完成会触发
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
//获取照片
function getPhoto(source) {
//quality : 图像的质量，范围是[0,100]
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
//获取照片成功
function onPhotoURISuccess(imageURI) {
//打印出照片路径
console.log(imageURI);
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
//获取照片是吧
function onFail(message) {
alert('获取失败: ' + message);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">
从“相簿”中获取照片
</button> <br>
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
2，从“照片库（时刻）”中获取照片
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource;
var destinationType;
document.addEventListener("deviceready",onDeviceReady,false);
//Cordova加载完成会触发
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
//获取照片
function getPhoto(source) {
//quality : 图像的质量，范围是[0,100]
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
//获取照片成功
function onPhotoURISuccess(imageURI) {
//打印出照片路径
console.log(imageURI);
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
}
//获取照片是吧
function onFail(message) {
alert('获取失败: ' + message);
}
</script>
</head>
<body style="padding-top:50px">
<button style="font-size:23px;" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">
从“时刻”中获取照片
</button> <br>
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
全部评论（1）
可以获取上传视频么？？
站长回复：视频的话你可以用媒体捕获插件（cordova-plugin-media-capture），录制完毕后可以得到保存的路径，让后你再将其上传。