增加 cordova-plugin-camera
1 切换到iOS项目所在的路径里
$ cordova plugin add cordova-plugin-camera
>>>："Fetching plugin "cordova-plugin-camera@~2.1.0" via npm"
会在下面生成这样的文件夹
2 找到下面路径中 camera的插件对应的iOS项目的class文件
class文件
3 在iOS项目的下图的路径中创建一个Plugins的文件夹，将上图选中的文件copy进来，如下
Plugins文件夹
4 完成上面的步骤，Add Files to ... -> Plugins文件夹
按照上面的配置，将Plugins文件夹导入项目中
5 在config.xml中添加 camera插件的配置
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<preference name="CameraUsesGeolocation" value="false" />
camera插件的配置
6 编写index.html文件如下
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<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);
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function onPhotoDataSuccess(imageData) {
console.log(imageData);
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData; }
function onPhotoURISuccess(imageURI) {
console.log(imageURI);
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI; }
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }
function capturePhotoEdit() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); }
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); }
function onFail(message) { alert('Failed because: ' + message); }
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
-
html内容参考phonegap照相插件的使用
html内容参考[phonegap照相插件的使用](http://blog.csdn.net/aaawqqq/article/details/20125837)
7 运行效果
CordovaExample Demo地址
Cordova入门也没有那么难，多看看官方的文档Documentation。安装其他的插件很上面的步骤类似。
