使用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>