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

来源：互联网发布：淘宝开情趣用品店编辑：程序博客网时间：2024/06/06 00:27

增加 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照相插件的使用

7 运行效果

CordovaExampleDemo地址

Cordova入门也没有那么难，多看看官方的文档Documentation。安装其他的插件很上面的步骤类似。

0 0

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

增加 cordova-plugin-camera

html内容参考phonegap照相插件的使用