浙江网站建设设计,wordpress+留言本,公司名称大全好听,摄影网站怎么备案Cordova入门系列#xff08;三#xff09;Cordova插件调用 版权声明#xff1a;本文为博主原创文章#xff0c;转载请注明出处 上一章我们介绍了cordova android项目是如何运行的#xff0c;这一章我们介绍cordova的核心内容#xff0c;插件的调用。演示一个例子#xf…Cordova入门系列三Cordova插件调用 版权声明本文为博主原创文章转载请注明出处 上一章我们介绍了cordova android项目是如何运行的这一章我们介绍cordova的核心内容插件的调用。演示一个例子通过cordova插件去调用摄像头。 一、插件的安装以及基本信息 我们先在项目中安装调用摄像头的插件cordova-plugin-cameracd到hello下执行 cordova plugin add cordova-plugin-camera 然后它会为我们的hello/plugins文件夹下添加cordova-plugin-camera插件这个是整个这个插件模块可用于安卓和ios。卸载插件用cordova plugin remove cordova-plugin-camera 同时也会在我们的platforms/android/platform_www/plugins下面添加对应的安卓的插件cordova-plugin-camera这个是根据对应的平台生成的对应的插件内容只可用于本安卓平台 也会在我们的资源文件夹assets/www/plugins下添加cordova-plugin-camera插件这个资源文件夹下的所有的文件才是真正的app运行的时候调用的加载的文件 还会为我们的src下添加org.apache.cordova.camera包以及对应的java文件。 为什么要在项目中加这么多这只是cordova的机制我们不作重点研究。这三个目录是有不同的作用的但我们只重点关注assets/www目录下。 除了上面这些加完这个插件也会改变一些其他文件的内容首先看res/xml/config.xml最后多了一项配置信息 feature nameCameraparam nameandroid-package valueorg.apache.cordova.camera.CameraLauncher /
/feature feature · namejs中间件通过它调用java方法。 中间件就是我们的插件对应的一些js文件。我们写的js程序通过这些插件中间件去调用Jjava原生内容 param · nameandroid-package value原生插件类的包类路径。 打开assets/www下cordova_plugins.js发现其中也增加了很多内容 cordova.define(cordova/plugin_list, function(require, exports, module) {
module.exports [{id: cordova-plugin-camera.Camera,file: plugins/cordova-plugin-camera/www/CameraConstants.js,pluginId: cordova-plugin-camera,clobbers: [Camera]},{id: cordova-plugin-camera.CameraPopoverOptions,file: plugins/cordova-plugin-camera/www/CameraPopoverOptions.js,pluginId: cordova-plugin-camera,clobbers: [CameraPopoverOptions]},{id: cordova-plugin-camera.camera,file: plugins/cordova-plugin-camera/www/Camera.js,pluginId: cordova-plugin-camera,clobbers: [navigator.camera]},{id: cordova-plugin-camera.CameraPopoverHandle,file: plugins/cordova-plugin-camera/www/CameraPopoverHandle.js,pluginId: cordova-plugin-camera,clobbers: [CameraPopoverHandle]}
];
module.exports.metadata
// TOP OF METADATA
{cordova-plugin-whitelist: 1.3.0,cordova-plugin-compat: 1.0.0,cordova-plugin-camera: 2.3.0
};
// BOTTOM OF METADATA
}); id:插件中某个模块或具体功能的id file:这个id对应的js文件实现这个模块或功能的文件 pluginId:插件的ID通过这个ID可以进行插件的安装和卸载 clobbers:H5或js通过它去调用js中间件插件中定义的方法 二、在代码中如何调用摄像头插件 上面我们说的都是在执行了cordova plugin add cordova-plugin-camera安装好插件之后所产生的内容以及插件的一些基本信息配置信息。接下来我们说一下如何简单使用这个插件。 首先我们修改index.html指的assets/www下的 !DOCTYPE html
htmlheadmeta nameformat-detection contenttelephonenometa namemsapplication-tap-highlight contentnometa nameviewport contentuser-scalableno, initial-scale1, maximum-scale1, minimum-scale1, widthdevice-widthlink relstylesheet typetext/css hrefcss/index.csstitleHello World/title/headbodydiv classapp!-- 这里添加一个button去调用自己写的拍照函数 --button onClicktakePhoto()拍照/button/divscript typetext/javascript srccordova.js/scriptscript typetext/javascript srcjs/index.js/script/body
/html 接下来再修改index.js //自己定义的拍照函数
function takePhoto() {//拍照//navigator.camera就是上面我们所说的clobbers定义的东西用来调用插件中的方法的//getPicture就是插件中调用摄像头拍照的方法navigator.camera.getPicture(takeSuccess, takeFail, {destinationType : Camera.DestinationType.FILE_URI});//拍照成功后回调function takeSuccess(imageURI) {console.log(success imageURI);}//失败后回调function takeFail(message) {navigator.notification.alert(拍照失败原因 message);}
} 至此我们的Cordova摄像头插件已经在代码中调用好了运行我们的项目就可以拍照了。当然模拟器上是不行的得用真机 三、getPicture()方法详解 camera.getPicture(cameraSuccess, cameraError, cameraOptions) 选择使用摄像头拍照或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数 1.一个字符串包含Base64编码的照片图像默认情况。 2.一个字符串表示在本地存储的图像文件位置。 cameraSuccess 提供图像数据的onSuccess回调函数。 function(imageData) {// 对图像进行处理
} 参数imageData根据cameraOptions的设定值为Base64编码的图像数据或图像文件的URI。字符串类型 errorCallback: 提供错误信息的onError回调函数。 function(message) {// 显示有用信息
} 参数message设备本地代码提供的错误信息。字符串类型 cameraOptions 定制摄像头设置的可选参数。 { quality : 75,destinationType : Camera.DestinationType.DATA_URL,sourceType : Camera.PictureSourceType.CAMERA,allowEdit : true,encodingType : Camera.EncodingType.JPEG,targetWidth : 100,targetHeight : 100
}; quality存储图像的质量范围是[0,100]。数字类型 destinationType选择返回数据的格式。通过navigator.camera.DestinationType进行定义。数字类型 备注强烈建议将“Camera.destinationType”设为FILE_URI。 sourceType设定图片来源。通过nagivator.camera.PictureSourceType进行定义。数字类型 allowEdit在选择图片进行操作之前允许对其进行简单编辑。布尔类型 EncodingType选择返回图像文件的编码方式通过navigator.camera.EncodingType进行定义。数字类型 targetWidth以像素为单位的图像缩放宽度必须和targetHeight同时使用。相应的宽高比保持不变。数字类型 targetHeight以像素为单位的图像缩放高度必须和targetWidth同时使用。相应的宽高比保持不变。数字类型 MediaType设置选择图片的类型只有当PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM时才会生效该参数由nagivator.camera.MediaType (数字类型)定义。 转载于:https://www.cnblogs.com/Jeely/p/10791113.html
