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

最新推荐文章于 2024-08-07 09:26:26 发布

LarryHai6

最新推荐文章于 2024-08-07 09:26:26 发布

阅读量4k

点赞数

分类专栏： IT-手机移动开发文章标签： ios开发移动开发

IT-手机移动开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

增加 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>