Cordova入门系列(三)Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html...

Cordova入门系列(三)Cordova插件调用

版权声明:本文为博主原创文章,转载请注明出处

 

 

  上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用。演示一个例子,通过cordova插件,去调用摄像头。

 

一、插件的安装以及基本信息:

  我们先在项目中安装调用摄像头的插件cordova-plugin-camera,cd到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 name="Camera"><param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>

  feature · name:"js中间件通过它调用java方法"。
  (中间件就是我们的插件对应的一些js文件。我们写的js程序通过这些插件(中间件)去调用Jjava原生内容)
  param · name:"android-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>
<html><head><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"><link rel="stylesheet" type="text/css" href="css/index.css"><title>Hello World</title></head><body><div class="app"><!-- 这里添加一个button去调用自己写的拍照函数 --><button onClick="takePhoto()">拍照</button></div><script type="text/javascript" src="cordova.js"></script><script type="text/javascript" src="js/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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/277812.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

shell脚本传可选参数 getopts 和 getopt的方法

写了一个shell脚本&#xff0c;需要向shell脚本中传参数供脚本使用&#xff0c;达到的效果是传的参数可以是可选参数 下面是一个常规化的shell脚本&#xff1a; echo "执行的文件名为: $0";echo "第一个参数名为: $1";echo "第二个参数名为: $2"…

Teams Tab App 代码深入浅出 - 配置页面

上一篇文章我们使用Teams Toolkit 来创建、运行 tab app。这篇文章我们深入来分析看一下tab app 的代码。 先打开代码目录&#xff0c;可以看到在 src 目录下有入口文件 index.tsx&#xff0c;然后在 components 目录下有更多的一些 tsx 文件&#xff0c;tsx 是 typescript的一…

labelme标注的json文件数据转成coco数据集格式(可处理目标框和实例分割)

这里主要是搬运一下能找到的 labelme标注的json文件数据转成coco数据集格式&#xff08;可处理目标框和实例分割&#xff09;的代码&#xff0c;以供需要时参考和提供相关帮助。 1、官方labelme实现 如下是labelme官方网址&#xff0c;提供了源代码&#xff0c;以及相关使用方…

EpSON TM-82II驱动在POS系统上面安装问题处理

按照品牌名称&#xff0c;在网上下载的安装包为apstmt82.rar 下面讲解一下&#xff0c;如何的解决爱普生打印机在POS机器上面的安装问题&#xff0c;这个算是一个比较奇特的故障问题&#xff0c;不像其它的新北冰洋&#xff08;SN3C&#xff09;的U80_U80II&#xff0c;SeNor的…

打印图片的属性和实现另存图片功能以及使用numpy

上一篇我们已经学了如何读取图片的功能了以及和opencv的环境搭建了&#xff0c;今天接着来学习&#xff0c;哈哈哈&#xff0c;今天刚好五一&#xff0c;也没闲着&#xff0c;继续学习。 1、 首先我们来实现打印出图片的一些属性功能&#xff0c; 先来看一段代码&#xff1a; 1…

Ubuntu 18.04下命令安装VMware Tools

2019独角兽企业重金招聘Python工程师标准>>> sudo apt-get upgrade sudo apt-get install open-vm-tools-desktop -y sudo reboot 转载于:https://my.oschina.net/u/574036/blog/1829455

Qfile

打开方式&#xff1a; 1 void AddStudents::write_to_file(QString src){2 QFile file("stu.txt");3 if (!file.open(QIODevice::Append | QIODevice::Text)){4 QMessageBox::critical(this,"打开文件错误","确认");5 r…

IDEA svn 菜单不见了,解决方法

2019独角兽企业重金招聘Python工程师标准>>> 参考地址: http://www.cnblogs.com/signheart/p/193448a98f92bd0cc064dbd772dd9f48.html,我是第二种方法解决的! 转载于:https://my.oschina.net/liuchangng/blog/1829679

苏宁易购:Hadoop失宠前提是出现更强替代品

在笔者持续调研国内Hadoop生态系统生存现状的同时&#xff0c;KDnuggets发布的2018年数据科学和机器学习工具调查报告再次将“Hadoop失宠”言论复活。报告一出&#xff0c;“Hadoop被抛弃”几个字瞬时成为各大标题党的最爱&#xff0c;充斥在不同的新闻平台。这些报告和数据是否…

VS2017生成一个简单的DLL文件 和 LIB文件——C语言

下面我们将用两种不同的姿势来用VS2017生成dll文件&#xff08;动态库文件&#xff09;和lib文件&#xff08;静态库文件&#xff09;&#xff0c;这里以C语言为例&#xff0c;用最简单的例子&#xff0c;来让读者了解如何生成dll文件&#xff08;动态库文件&#xff09; 生成动…

Hive数据类型及文本文件数据编码

本文参考Apache官网&#xff0c;更多内容请参考&#xff1a;https://cwiki.apache.org/confluence/display/Hive/LanguageManualTypes 1. 数值型 类型支持范围TINYINT1-byte signed integer, from -128 to 127SMALLINT2-byte signed integer, from -32,768 to 32,767INT/INTEGE…

Python绘图Turtle库详解

转载&#xff1a;https://blog.csdn.net/zengxiantao1994/article/details/76588580 Turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;想象一个小乌龟&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff0c;(0,0)位置开始&#xff0c;它根据一组函数指令…

mac使用brew update无反应解决办法

为什么80%的码农都做不了架构师&#xff1f;>>> mac系统中使用brew作为包管理工具&#xff0c;类似centos中的yum&#xff0c;ubuntu中的apt-get&#xff0c;在使用brew update的使用&#xff0c;有时候会长时间无反应&#xff0c;或者中途断开连接&#xff0c;这是…

2018-2019-2 20175223 实验三《敏捷开发与XP实践》实验报告

目录 北京电子科技学院&#xff08;BESTI&#xff09;实验报告实验名称&#xff1a;实验三 敏捷开发与XP实践实验内容、步骤与体会&#xff1a;一、实验三 敏捷开发与XP实践-1二、实验三 敏捷开发与XP实践-2三、实验三 敏捷开发与XP实践-3四、实验三 敏捷开发与XP实践-4五、代码…

(八)路径(面包屑导航)分页标签和徽章组件

一&#xff0e;路径组件 路径组件也叫做面包屑导航。 <ol class"breadcrumb"><li><a href"#">首页</a></li><li><a href"#">产品列表</a></li><li><a href"#">大…

python之爬虫(四)之 Requests库的基本使用

什么是Requests Requests是用python语言基于urllib编写的&#xff0c;采用的是Apache2 Licensed开源协议的HTTP库如果你看过上篇文章关于urllib库的使用&#xff0c;你会发现&#xff0c;其实urllib还是非常不方便的&#xff0c;而Requests它会比urllib更加方便&#xff0c;可以…

win8下cocos2dx-3.2+VS2012环境配置及项目创建

这是本人CSDN的第一篇博客&#xff0c;因为假期在学校做实训项目接触到了cocos2dx&#xff0c;觉得是一个特别适用强大&#xff0c;有不错的可移植性&#xff08;虽然可移植性不错&#xff0c;但实际上写好的游戏往Android上移植&#xff0c;我的队友废了好大劲。。。&#xff…

Mac系统下Homebrew的安装和使用Homebrew安装python

这里向大家推荐一个东西&#xff0c;Mac下很好用的东西&#xff0c;叫做Homebrew。刚开始接触Mac的时候&#xff0c;我也没听过这个东西&#xff0c;但装了以后真的觉得&#xff0c;TMD太碉堡了。引用一句话&#xff1a;Homebrew is the easiest and most flexible way to inst…

Mac下cocos2dx-3.2+Xcode环境配置和项目创建

这是有关环境配置的第二篇教程&#xff0c;第一篇讲的是win8下的环境配置。这里我们使用C。所有如果你用其他语言如Lua和js进行cocos2d开发&#xff0c;那么可以再找一找其他的配置文档。下面要说Mac os 下 cocos2dx-3.2Xcode的环境配置&#xff0c;这里我使用的是Xcode 5.1.1。…

Mac OS使用技巧之一:查看Finder中的.bash_profile等系统隐藏文件

作为一个程序员&#xff0c;经常要配置变量&#xff0c;可能要更改hosts文件&#xff0c;或者你闲着没事儿寻找homebrew给你安装的东西在什么地方。Mac OS的内核是Unix&#xff0c;Linux/Unix系统出于系统安全和用户安全的考虑&#xff0c;会把一些与系统相关的文件隐藏&#x…