原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/

1.首先下载这个插件:

可以在package.json文件中添加“cordova-plugin-device"来添加,也可以直接在ngCordova官网里找到相应的命令来下载,

命令为:

cordova plugin add cordova-plugin-camera

2.在ionic项目中要使用这个插件的页面相应的控制器里添加相应的插件名来引用,记得在依赖项里要加ngCordova,不然会出错。

3.在控制器里写入相应的js代码(这些代码在ngCordova官网插件的应用上有详细的方法调用,根据具体的需要来写自己所需要的功能的代码)我这个代码是来实现页面上要显示7张从手机相册中选择的图片,

js代码如下:

$scope.takePicture = function (img) {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 500,
targetHeight: 500,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
}; $cordovaCamera.getPicture(options).then(function (imageData) {
// alert(imageData);
if (img == 1) {
$scope.data.IDCardImage1 = imageData;
$scope.imgURI1 = "data:image/jpeg;base64," + imageData;
}
if (img == 2) {
$scope.data.IDCardImage2 = imageData;
$scope.imgURI2 = "data:image/jpeg;base64," + imageData;
}
if (img == 3) {
$scope.data.Qualified = imageData;
$scope.imgURI3 = "data:image/jpeg;base64," + imageData;
}
if (img == 4) {
$scope.data.CredentialImage = imageData;
$scope.imgURI4 = "data:image/jpeg;base64," + imageData;
}
if (img == 5) {
$scope.data.CarInfoImage1 = imageData;
$scope.imgURI5 = "data:image/jpeg;base64," + imageData;
}
if (img == 6) {
$scope.data.CarInfoImage2 = imageData;
$scope.imgURI6 = "data:image/jpeg;base64," + imageData;
}
if (img == 7) {
$scope.data.CarInfoImage3 = imageData;
$scope.imgURI7 = "data:image/jpeg;base64," + imageData;
} else {
return "";
}
}
);
};
$scope.take = function () {
this.takePicture();
}

  

4.html页面的代码如下(其中ng-src中要把图片转化为base64格式,上传到服务器)我这里只贴出了显示两张图片的代码,其他的类似:

<div class="row">
<div class="col padding" ng-click="takePicture(1)">
<img ng-src="data:image/jpeg;base64,{{data.IDCardImage1}}"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
</div>
<div class="col padding" ng-click="takePicture(2)">
<img ng-src="data:image/jpeg;base64,{{data.IDCardImage2}}"
style="border: 1px dashed gray;width: 100px;height: 100px;background-color: #f0f0f0"/>
</div>
<div class="col padding"></div>
</div>

  

注:第一次在这里分享自己遇到的问题和解决方案,有不足的地方欢迎大家纠正、评论以及提问,有更多精彩技术分享会一直更新http://www.ncloud.hk/

												

ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传的更多相关文章

  1. Cordova各个插件使用介绍系列(八)—$cordovaCamera筛选手机图库图片并显示

    原文档请看http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9B%BE%E7%89%87%E4%B8%8A%E4%B ...

  2. ASP.NET中上传图片检测其是否为真实的图片 防范病毒上传至服务器

    一.需求 我们在用.net开发网站时,经常会用到图片上传,可以说是每个网站必备的,大到门户网站,电商网站,政务系统,OA系统,小到企业网站,个人网站,博客网站,导航网站等等,都有用到图片上传,那么在客 ...

  3. ionic项目中手机状态栏显示使用$cordovaStatusbar插件

    在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...

  4. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  5. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  6. Ionic项目中如何使用Native Camera

    本文介绍如何在ionic项目中使用设备的camera. Ionic版本:v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes ============= ...

  7. ionic 项目中 使用 sass

    注: 1.先安装node-sass  -->> npm install --save node-sass --registry=https://registry.npm.taobao.or ...

  8. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  9. 在类似qq或者微信聊天中。如何根据不同的手机发送图片

    原文:在类似qq或者微信聊天中.如何根据不同的手机发送图片   前一段时间,公司自己要求做多客服开发,但是对于发送图片这一块,当时很苦恼,我用自己的手机(米2)测试,不管是本地,还是云相册,最新照片. ...

随机推荐

  1. hdu1540线段树

    https://vjudge.net/contest/66989#problem/I #include<iostream> #include<cstdio> #include& ...

  2. BFC块级格式上下文

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  3. myeclipse/eclipse 配置SSM框架错误之一解决方法

    报错如下: 1. [org.springframework.web.context.ContextLoader] - Root WebApplicationContext: initializatio ...

  4. 搭建本地git仓库

    使用工具:git|码云 步骤: 注册码云账号,创建项目名称等. 本地git配置 本地文件目录:git init(初始化创建分支master) 基础配置:git config --global user ...

  5. Java中实现String.padLeft和String.padRight

    因为习惯了C#中的padLeft和padRight,接触Java后突然失去这两个功能,觉得别扭,就试着实现了这两个方法. Java中String.format()中带有字符串对齐功能如下: Syste ...

  6. Thinkphp3.2学习——架构_URL模式

    入口文件是应用的单一入口,对应用的所有请求都定向到应用入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作: http://serverName/index.php/模块/控制器/操作 这是 ...

  7. Java线程池总结

    前一篇文章Java中实现多线程关键词整理中介绍了Java中创建多线程的各种办法,里面提到了线程池,这里对Java中的线程池做一个总结. 1. 关于ThreadPoolExecutor 为了更好地控制多 ...

  8. Tomcat Server处理一个http请求过程

    假设来自客户端的请求为: http://localhost:8080/lizhx/lizhx_index.jsp 请求被发送到本机端口8080,被在那里侦听的Coyote HTTP/1.1 Conne ...

  9. 面试(1)-java-se-字符串

    http://blog.csdn.net/zhangerqing/article/details/8093919 hashCode和identityHashCode的区别 I. hashCode()方 ...

  10. javaWeb学习总结(10)- EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...