使用Cordova进行iOS开发 (第三方插件的使用：Camera插件)

2019-11-09 16:34:20

字体：大中小

来源：转载

供稿：网友

增加 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插件的配置

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>