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. Android Studio项目转Eclipse项目

    Android Studio项目的目录结构和Eclipse项目不同.如何转换? 以FloatingAction 项目为例:实现向上滑动隐藏悬浮按钮,向上滑动显示悬浮按钮. GitHub 地址:http ...

  2. 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误

    在visual studio 中添加数据库应用时,报错,提示如下: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL ...

  3. java中String的相等比较

    首先贴出测试用例: package test; import org.junit.Test; /** * Created by Administrator on 2015/9/16. * */ pub ...

  4. JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象.在JavaScript中,用来指定变量的关键字为var.当声明新变量时,可以使用关键词 "new" 来声明其类型 ...

  5. 基于HTML5的WebGL结合Box2DJS物理应用

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...

  6. HT for Web基于HTML5的图像操作(一)

    HT for Web独创的矢量图片设计架构,使其具有强大丰富的动态图形呈现能力,但从最近知乎热议的“Adobe Photoshop 是否已经过时?”的话题,大家能体会到很多情况下实际项目不可能完全采用 ...

  7. CSS魔法堂:你一定误解过的Normal flow

    前言  刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...

  8. 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。

    问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...

  9. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  10. LINQ使用Lambda表达式选择几列

    学习LINQ的Lambda的表达式,尝试从数据集合中,选择其中几列. 创建一个model: source code: namespace Insus.NET.Models { public class ...