插件下的plugin.xml以及Camera的调取方法

xiaoxiao2021-03-25 65

先看plugin.xml: plugin.xml定义了你的插件所需要的结构和设置，它由一些元素来提供有关这个插件的详细配置信息

打开plugins/cordova-plugin-camera/plugin.xml

//这里只截取android块的 <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:rim="http://www.blackberry.com/ns/widgets" id="cordova-plugin-camera" version="2.4.0"> <name>Camera</name> <description>Cordova Camera Plugin</description> <license>Apache 2.0</license> <keywords>cordova,camera</keywords> <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git</repo> <issue>https://issues.apache.org/jira/browse/CB/component/12320645</issue> <dependency id="cordova-plugin-compat" version="^1.1.0" /> <js-module src="www/CameraConstants.js" name="Camera"> <clobbers target="Camera" /> </js-module> <js-module src="www/CameraPopoverOptions.js" name="CameraPopoverOptions"> <clobbers target="CameraPopoverOptions" /> </js-module> <js-module src="www/Camera.js" name="camera"> <clobbers target="navigator.camera" /> </js-module>  <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="Camera"> <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/> </feature> </config-file> <config-file target="AndroidManifest.xml" parent="/*"> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> </config-file> <config-file target="AndroidManifest.xml" parent="application"> <provider android:name="android.support.v4.content.FileProvider" android:authorities="${applicationId}.provider" android:exported="false" android:grantUriPermissions="true" > <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/provider_paths"/> </provider> </config-file> <source-file src="src/android/CameraLauncher.java" target-dir="src/org/apache/cordova/camera" /> <source-file src="src/android/CordovaUri.java" target-dir="src/org/apache/cordova/camera" /> <source-file src="src/android/FileHelper.java" target-dir="src/org/apache/cordova/camera" /> <source-file src="src/android/ExifHelper.java" target-dir="src/org/apache/cordova/camera" /> <source-file src="src/android/xml/provider_paths.xml" target-dir="res/xml" /> <js-module src="www/CameraPopoverHandle.js" name="CameraPopoverHandle"> <clobbers target="CameraPopoverHandle" /> </js-module> <framework src="com.android.support:support-v4:24.1.1+" /> </platform> </plugin> xmlns：命名空间（android xml文件下很常见） id：插件的标识，即发布到plugin.cordova.io的ID version：插件的版本号 name：插件的名称 description：插件的描述信息 keywords:关键字 dependency：依赖其它插件，该插件被其独特的NPM的ID或URL GitHub的引用。 platform：平台 js-module：每一个js-moudle对应一个文件，会根据对应插件里的文件插入相应的assets／www目录下，具体位置是由src指明的。 src：相对于plugin.xml文件插件中的文件 name：提供模块名称的最后一部分。它一般可以是你喜欢的，如果你想使用cordova.require导入你的插件的其他部分在JavaScript代码只在乎。对于js-module模块名称是你的插件的ID后跟名称的值。 clobbers：js-module元素内标记。用于指定module.exports被插入在window对象的命名空间。你可以有很多的clobbers只要你喜欢。(ps:不懂)

举个例子eg：

<js-module src="www/CameraConstants.js" name="Camera"> <clobbers target="Camera" /> </js-module> 这里的moudle.expoets被插入到window对象window.Camera 而CameraConstants.js则被插入到assets／www／cordova-plugin-camera／www／插入规则是：相对于assets／www／id名／src路径

看platform name=”android”下的目录：

android插入看起来就方便多了，从上面看一个事配置config-file，一个是source-file。一个插入配置信息，一个插入文件。要插入的文件夹如果存在就插入，如果不存在就新建文件夹，在插入，逻辑就是这个样子。这里就不截图了，把一个插件add进入，编译后，打开项目都可以清楚的看到。

下面看看html中的代码，就是index.html,上一篇用到的：

<!DOCTYPE html> <html> <head> <title>调用照相机插件</title> <style type="text/css"> button{ margin: 10px; background-color: pink; padding: 3px; border: 0px; } </style> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for device API libraries to load 等待phoneGap连接设备 document.addEventListener("deviceready",onDeviceReady,false); // device APIs are available //phoneGape准备jiuxu，可以使用！ function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } // Called when a photo is successfully retrieved //当成功获得一张照片的Base64编码数据后被调用 function onPhotoDataSuccess(imageData) { // Uncomment to view the base64-encoded image data //取消注释以查看Base64编码的图像数据 console.log(imageData); // Get image handle //获取图像句柄 var smallImage = document.getElementById('smallImage'); // Unhide image elements //取消隐藏的图像元素 smallImage.style.display = 'block'; // Show the captured photo // The in-line CSS rules are used to resize the image // 显示拍摄的照片 // 使用内嵌CSS规则来缩放图片 smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved //当成功得到一张照片的URI后被调用 function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // Get image handle // 取消注释以查看图片文件的URI // 获取图片句柄 console.log(imageURI); var largeImage = document.getElementById('largeImage'); // Unhide image elements // 取消隐藏的图像元素 largeImage.style.display = 'block'; // Show the captured photo // The in-line CSS rules are used to resize the image // 显示拍摄的照片 // 使用内嵌CSS规则来缩放图片 largeImage.src = imageURI; } // A button will call this function //“Capture Photo”按钮点击事件触发函数 function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function //“Capture Editable Photo”按钮点击事件触发函数 function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // A button will call this function //“From Photo Library”/“From Photo Album”按钮点击事件触发函数 function getPhoto(source) { // Retrieve image file location from specified source // 从设定的来源处获取图像文件URI navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. //当有错误发生时触发此函数 function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <button onclick="capturePhoto();">拍照</button> <br> <button onclick="capturePhotoEdit();">拍照并可编辑图片</button> <br> <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">获取相册</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">另一种方法获取相册</button><br> <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> </body> </html>

最上面的就不说了，style修饰button的，最下面也不说了，button点击事件。这里要说的是fuction里面系统调用照相机的这块代码，方法名及传递参数的含义：

//方法 camera.getPicture eg：navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

说明：camera.getPicture函数打开设备的默认摄像头，使用户可以拍照（如果 Camera.sourceType 设置为Camera.PictureSourceType.CAMERA，这也是默认值）可以不设置Camera.sourceType这个参数。（对应第一种，进行拍照）

如果设置Camera.sourceType=Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictrueSourceType.SAVEDPHOTOALBUM系统会弹出选择兑换框，用户可以从相册中选择图片（对应我们的第三种和第四种，调用系统相册）

返回值会按照用户通过CameraOptions参数所设定的格式之一发送给cameraSuccess回调函数：

一个字符串，包含Base64编码的照片图像（默认情况）一个字符串，表示本地存储的图像文件位置。

eg:

//拍照并获取Base64编码图像： navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) { alert('Failed because: ' + message); }

eg：

//拍照并获取图像文件路径： navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) { var image = document.getElementById('myImage'); image.src = imageURI; } function onFail(message) { alert('Failed because: ' + message); }

两种方式的区别就在于：destinationType的设置参数不同。

你可以对编码的图片或URI做任何处理，例如：通过img标签渲染图片（参看后续范例）存储为本地数据（LocalStorage，Lawnchair*等）将数据发送到远程服务器

说说各参数的意义：

//定制摄像头设置的可选参数 { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType : Camera.EncodingType.JPEG, targetWidth : 100, targetHeight : 100}; quality:存储图片的质量，范围[0,100],这个和android一样。（数字类型） destiationType：选择返回的数据格式通过通过navigator.camera.DestinationType进行定义。（数字类型） Camera.DestinationType = { DATA_URL : 0, //返回Base64编码字符串的图像数据 FILE_URI : 1 //返回图像文件的URI } sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型） Camera.PictureSourceType = { PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2 } allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型） EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型） Camera.EncodingType = { JPEG : 0, // 返回JPEG格式图片 PNG : 1 // 返回PNG格式图片 }; targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。（数字类型） targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。（数字类型） MediaType：设置选择图片的类型，只有当PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM时才会生效，该参数由nagivator.camera.MediaType (数字类型)定义 Camera.MediaType = { PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType //默认值，返回的是Picture，返回由DestinationType指定的格式 VIDEO: 1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI //选出的只能是video类型，返回值是FILE_URI ALLMEDIA : 2 //allow selection from all media types 允许选出的是所有类型

就写到这里了，已经标的很详细了，有问题，留言拍砖，多多指教…

代码及搭建上一篇例子：http://blog.csdn.net/zxyudia/article/details/61436289 转载地址请表明：http://blog.csdn.net/zxyudia/article/details/61618315 参考文章：http://www.phonegapcn.com/docs/zh/cn/camera.html

转载请注明原文地址: https://ju.6miu.com/read-34279.html

技术

最新回复(0)