1、需求描述

  实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能

2、准备

  1) 安装ng-cordova

    进入到ionic工程目录,使用bower工具安装,

    bower install ngCordova

    然后将ng-cordova.js 或者 ng-cordova.min.js 添加到index.html 中的 cordova.js 引用之前

    ...

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <script src="lib/cordova.js></script>

    ...

    在angular中添加ngCordova依赖

       angular.module('myApp',['ngCordova'])

  2) 安装 $cordovaCamera

    cordova plugin add cordova-plugin-camera

    在controller中添加依赖

    .controller('appControl',['$cordovaCamera']){

      ...

    }

  3)安装$cordovaImagePicker

    cordova plugin add cordova-plugin-image-picker      

    在controller中添加依赖

    .controller('appControl',['$cordovaImagePicker']){

      ...

    }

3、代码实现

  

 ("deviceready",function(){
2   //拍照
3   var options={
4     quality:50, //保存图像的质量,范围0-100
5     destinationType:Camera.DestinationType.DATA_URL, //返回值格式:DATA_URL=0,返回作为base64编码字符串;FILE_URL=1,返回图像的URL;NATIVE_RUL=2,返回图像本机URL
6     sourceType:Camera.PictureSourceType.CAMERA, //设置图片来源:PHOTOLIBRARY=0,相机拍照=1,
7     allowEdit:true, //选择图片前是否允许编辑
8     encodingType:Camera.EncodingType.JPEG, //JPEN = 0,PNG = 1
9     targetWidth:100, //缩放图像的宽度(像素)
10     targetHeight:100, //缩放图像的高度(像素)
11     popoverOptions:CameraPopoverOptions, //ios,iPad弹出位置
12     saveToPhotoAlbum:true, //是否保存到相册
13     correctOrientation:true //设置摄像机拍摄的图像是否为正确的方向
14   };
15   $cordovaCamera.getPicture(options).then(function(imageData){
16     $scope.imageSrc="data:image/jpeg;base64,"+imageData;
17   },function(err){
    //error
19   });
20 },false);
 document.addEventListener("deviceready",function(){
  var options = {
    maximumImagesCount: 10, //最大选择图片数量
    width: 800, //筛选宽度:如果宽度为0,返回所有尺寸的图片
    height: 800, //筛选高度:如果高度为0,返回所有尺寸的图片
    quality: 80 //图像质量的大小,默认为100
  };
  $cordovaImagePicker.getPictures(options).then(function (results) {
    for (var i = 0; i < results.length; i++) {
      alert('Image URI: ' + results[i]);
    }
  },function(error) {
    // error getting photos
  });
},false);

ng-cordova 手机拍照或从相册选择图片的更多相关文章

  1. 浅谈Android中拍照、从相册选择图片并截图相关知识点

    前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...

  2. HTML5 Plus 拍照或者相册选择图片上传

    HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...

  3. [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现

    [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...

  4. Android之修改用户头像并上传服务器(实现手机拍照和SD卡选择上传)

    写了这么多个的APP,最近才把他这个功能写上来,就抽取其中的用户修改头像的相关操作这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 案例包含了: Xutil图片上传 拍照和SD卡选择图片 图片缓 ...

  5. android 拍照和从相册选择组件

    android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...

  6. 微信小程序:从本地相册选择图片或使用相机拍照。

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...

  7. IOS研究院之打开照相机与本地相册选择图片(六)

    原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:IOS研究院之打开照相机与本地相册选择图片(六) Hello 大家好 IOS的文章好久都木有更新了,今天更新一篇哈. 这篇文章主要学习 ...

  8. android --拍照,从相册获取图片,兼容高版本,兼容小米手机

    前几天做项目中选择图片的过程中遇到高版本和小米手机出现无法选择和崩溃的问题,现在记录下来,后面出现同类问题,也好查找 1,定义常量: private static final int TAKE_PIC ...

  9. Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传

    本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...

随机推荐

  1. PHP的学习--使用PhpDocumentor 2生成API文档

    官网地址:http://www.phpdoc.org/ 项目地址:https://github.com/phpDocumentor/phpDocumentor2 phpDocumentor 2是一个可 ...

  2. Deep learning:四十一(Dropout简单理解)

    前言 训练神经网络模型时,如果训练样本较少,为了防止模型过拟合,Dropout可以作为一种trikc供选择.Dropout是hintion最近2年提出的,源于其文章Improving neural n ...

  3. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  4. EnjoyCSS – 在线的,先进的 CSS3 代码生成器

    EnjoyCSS 是一款先进的 CSS3 代码生成工具,可以让你摆脱日常的编码.它方便和易于使用的用户界面允许您快速,无需编码就可以调节出丰富的图形样式.您将能够玩转所有的 EnjoyCSS 参数,就 ...

  5. javascript学习总结(三):如何较好的使用js。

    1 假如浏览器不支持JavaScript怎么办? a.为什么浏览器会不支持?大部分浏览器都有禁用脚本的功能,例如chrome.b.在js被禁用的情况下要保证网页仍能实现它的核心功能(关键的用户需求) ...

  6. 【大数据】Linux下安装Hadoop(2.7.1)详解及WordCount运行

    一.引言 在完成了Storm的环境配置之后,想着鼓捣一下Hadoop的安装,网上面的教程好多,但是没有一个特别切合的,所以在安装的过程中还是遇到了很多的麻烦,并且最后不断的查阅资料,终于解决了问题,感 ...

  7. 二、Sink例程

    1. Sink例程 CSR粗略的将audio蓝牙设备分为了两大类:sink和source设备,并分别提供了两类设备的例程,配置工具,说明文档.如对于sink设备,提供了sink app例程,SinkU ...

  8. 转自coolshell--vim的基本操作

    开始前导语: 在正式转入python开发后,日常的工作中会和大量linux相关命令和工具接触,从另外一个层面,学习的东西相当的多,而VIM在整个的linux体系中所占据的角色就更不用说了,之前在处理g ...

  9. mysql 二进制日志后缀数字最大为多少

    之前看到mysql二进制日志后面会加一个以数字递增为结尾的后缀,一直在想当尾数到达999999后会发生什么情况,先查了一下官网,对后缀有这样一句介绍:The server creates binary ...

  10. 最简单的pagging插件

    <html> <head> <title>jQuery Easy-Paging Test</title> </head> <body& ...