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

增加 cordova-plugin-camera

1 切换到iOS项目所在的路径里

$ cordova plugin add cordova-plugin-camera
>>:"Fetching plugin "cordova-plugin-camera@~2.1.0" via npm"
使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第1张图片
会在下面生成这样的文件夹

2 找到下面路径中 camera的插件对应的iOS项目的class文件

使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第2张图片
class文件

3 在iOS项目的下图的路径中创建一个Plugins的文件夹,将上图选中的文件copy进来,如下

使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第3张图片
Plugins文件夹

4 完成上面的步骤,Add Files to ... -> Plugins文件夹

使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第4张图片
按照上面的配置,将Plugins文件夹导入项目中

5 在config.xml中添加 camera插件的配置

   <feature name="Camera">
        <param name="ios-package" value="CDVCamera" />
    feature>
    <preference name="CameraUsesGeolocation" value="false" />
使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第5张图片
camera插件的配置

6 编写index.html文件如下


<html>
    <head>
        <title>Capture Phototitle>
        <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 Photobutton> <br>
        <button onclick="capturePhotoEdit();">Capture Editable Photobutton> <br>
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Librarybutton><br>
        <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Albumbutton><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />
    body>
html>
  • html内容参考phonegap照相插件的使用
    使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第6张图片
    html内容参考 phonegap照相插件的使用

7 运行效果

使用Cordova进行iOS开发 (第三方插件的使用:Camera插件)_第7张图片

CordovaExample Demo地址


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

你可能感兴趣的:(IT-手机移动开发)