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. nodejs支持ssi实现include shtml页面

    express 对于include的代码默认不处理,直接输出,没办法执行include的内容,但可以通过Nginx实现. 1. 配置nginx设置开启ssi模式. server { … ssi on; ...

  2. [转载]TFS测试管理

    微软2010年发布的Visual Studio 2010或Visual Studio Test Professional 2010包含一个称为 Microsoft 测试管理器的新应用程序,用于帮助您使 ...

  3. Testing - Tips

    1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...

  4. Nodejs学习笔记(二)——Eclipse中运行调试Nodejs

    前篇<Nodejs学习笔记(一)——初识Nodejs>主要介绍了在搭建node环境过程中遇到的小问题以及搭建Eclipse开发Node环境的前提步骤.本篇主要介绍如何在Eclipse中运行 ...

  5. 学习制作精美 CSS3 按钮效果的10个优秀教程

    由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...

  6. 安装thrift

    要求 thrift至少需要支持三种语言: Java PHP Go 预安装 基本教程: http://thrift.apache.org/docs/install/centos 使用最新的thrift, ...

  7. 用redux构建购物车

    很久没更新博客了,最近要用到react,再来跟大家分享一个redux案例吧. [ {"id": 1, "title": "iPad 4 Mini&qu ...

  8. SpringMVC——自定义拦截器、异常处理以及父子容器配置

    自定义拦截器: 一.若想实现自定义拦截器,需要实现 org.springframework.web.servlet.HandlerInterceptor 接口. 二.HandlerIntercepto ...

  9. RichTextBoxEx2

    using System;using System.Collections.Specialized;using System.Drawing;using System.Drawing.Imaging; ...

  10. 功能更新到 Windows 10 企业版, 版本 1607

    功能更新到 Windows 10 企业版, 版本 1607