ng-cordova 手机拍照或从相册选择图片

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、代码实现

  

 1 ("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){
18     //error
19   });
20 },false);
 1 document.addEventListener("deviceready",function(){
 2   var options = {
 3     maximumImagesCount: 10, //最大选择图片数量
 4     width: 800,             //筛选宽度:如果宽度为0,返回所有尺寸的图片
 5     height: 800,            //筛选高度:如果高度为0,返回所有尺寸的图片
 6     quality: 80             //图像质量的大小,默认为100
 7   };
 8   $cordovaImagePicker.getPictures(options).then(function (results) {
 9     for (var i = 0; i < results.length; i++) {
10       alert(‘Image URI: ‘ + results[i]);
11     }
12   },function(error) {
13     // error getting photos
14   });
15 },false);     
时间: 2024-10-09 14:25:43

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

Android上传图片之调用系统拍照和从相册选择图片

Android上传图片之调用系统拍照和从相册选择图片 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015年12月17日下午发了第一篇博文,现在是2016年4月6日.时间间隔长的过分啊,我自己都看不下去了.原因呢?当然是自己的原因,其实是有很多时间来些博客的,但是这些时间都花在DOTA上了(还是太年轻啊).请原谅我的过错--. 一.概述: 现在几乎应用都会用到上传图片的功能,而要上传图片,首先得选择图片,本文不针对如何上传图片到服务器(每个项目与服务器交互的方式不同,因

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

利用HTML Plus的Camera.GalleryIO.Storage和Uploader来实现手机APP拍照或者从相册选择图片上传.Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象.Gallery模块管理系统相册,支持从相册中选择图片或视频文件.保存图片或视频文件到相册等功能.通过plus.gallery获取相册管理对象.IO模块管理本地文件系统,用于对文件系统的目录浏览.文件的读取.文件的写入等操作.通过plus.io可获取文件系统管理对象

Android拍照,相册选择图片以及Android6.0权限管理

概述 在android开发过程中,拍照或者从相册中选择图片是很常见的功能.下面要说得这个案例比较简单,用户点击按钮选择拍照或者打开相册选择图片,然后将选中的图片显示在手机上.android6.0后,推出了动态权限管理.以往我们将涉及到的权限全部写在清单文件中,只要用户安装了该程序,程序在运行过程中都会获得相应权限.android6.0后,对于一些特别敏感的权限,开发者必须在程序中进行声明.拍照和从相册选择图片都是涉及到用户隐私的敏感权限,必须在程序中进行声明. 大概的流程 创建布局文件,这里不多

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

写了这么多个的APP,最近才把他这个功能写上来,就抽取其中的用户修改头像的相关操作这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 案例包含了: Xutil图片上传 拍照和SD卡选择图片 图片缓存和界面逻辑处理 图片压缩和图片处理 自定义圆形头像 XUtils.Jar 下载 其他图片上传方式请看博客  :Volley-XUtils-OkHttp三种方式实现单张多张图片上传 效果图:(注:模拟器没拍照功能,效果图只有SD卡上传,手机测试拍照上传也是可以的) 代码: MainActivity.

android 拍照和从相册选择组件

android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和不裁剪两种模式 /** * <pre> * 拍照及从相册选择弹出 activity * 成功后会发送 TakePhotoOutputEvent 事件,返回图片路径 * </pre> */ public class TakePhotoPopupActivity extends Activ

Android拍照或从图库选择图片并裁剪

今天看<第一行代码>上面关于拍照和从相册选取图片那一部分,发现始终出不来效果,所以搜索其他资料学习一下相关知识,写一个简单的Demo. 一. 拍照选择图片 1.使用隐式Intent启动相机 //构建隐式Intent Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); //调用系统相机 startActivityForResult(intent, 1); 2.处理相机拍照返回的结果 //用户点击了取消 if(data == n

Qt 打开安卓相册选择图片并获取图片的本地路径

Qt 打开安卓相册选择图片并获取图片的本地路径 步骤如下: 通过 Intent 打开安卓的系统相册. 推荐使用 QAndroidJniObject::getStaticObjectField 获取静态字段. QAndroidJniObject action = QAndroidJniObject::getStaticObjectField( "android/content/Intent", "ACTION_GET_CONTENT", "Ljava/lan

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

本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/camera ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAG

android手机拍照或选取相册里面的图片

three.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"