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、代码实现
("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 手机拍照或从相册选择图片的更多相关文章
- 浅谈Android中拍照、从相册选择图片并截图相关知识点
前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- [Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现
[Android实例教程] 教你如何拍照+相册选择图片+剪裁图片完整实现 今天做Android项目的时候要用到图片选择,要实现拍照获取图片和从相册获取图片,并且要求在获取完之后可以裁剪,试了很多方法之 ...
- Android之修改用户头像并上传服务器(实现手机拍照和SD卡选择上传)
写了这么多个的APP,最近才把他这个功能写上来,就抽取其中的用户修改头像的相关操作这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 案例包含了: Xutil图片上传 拍照和SD卡选择图片 图片缓 ...
- android 拍照和从相册选择组件
android 拍照及从相册选择组件 单独封装到一个 activity 中便于更好的复用 拍照或从相册选择成功后使用 EventBus 发出广播回传图片路径,和调用者充分解耦合 根据传入参数支持裁剪和 ...
- 微信小程序:从本地相册选择图片或使用相机拍照。
wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...
- IOS研究院之打开照相机与本地相册选择图片(六)
原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:IOS研究院之打开照相机与本地相册选择图片(六) Hello 大家好 IOS的文章好久都木有更新了,今天更新一篇哈. 这篇文章主要学习 ...
- android --拍照,从相册获取图片,兼容高版本,兼容小米手机
前几天做项目中选择图片的过程中遇到高版本和小米手机出现无法选择和崩溃的问题,现在记录下来,后面出现同类问题,也好查找 1,定义常量: private static final int TAKE_PIC ...
- Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传
本文为原创文章,转载请标明出处 目录 安装插件 导入 app.module.ts 创建 provider 更多 效果图 1. 安装插件 终端运行: ionic cordova plugin add c ...
随机推荐
- Parallel并行化编程
在很多场景中我们需要通过并行化的方式来提高程序运行的速度,比较典型的需求就是并行下载.前期遇到一个需求是要批量下载瓦片,每次大概下载上百万个瓦片,要想提高瓦片的下载速度,只能通过并行化的方式,下面把我 ...
- mac+apache+php+phpmyadmin集成php开发环境配置
刚开始才接触php才发现macos还是比较强大了,macbook不仅是时尚达品还很实用哦. --------------他山之石-------------------------- http://da ...
- 增强学习(五)----- 时间差分学习(Q learning, Sarsa learning)
接下来我们回顾一下动态规划算法(DP)和蒙特卡罗方法(MC)的特点,对于动态规划算法有如下特性: 需要环境模型,即状态转移概率\(P_{sa}\) 状态值函数的估计是自举的(bootstrapping ...
- Android性能测试工具(一)之Emmagee
Android性能测试工具(一) 之Emmagee Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资源的性能测试小工具. 支持SDK:Android2.2以及以上版本 Emm ...
- java并发编程实战学习(3)--基础构建模块
转自:java并发编程实战 5.3阻塞队列和生产者-消费者模式 BlockingQueue阻塞队列提供可阻塞的put和take方法,以及支持定时的offer和poll方法.如果队列已经满了,那么put ...
- 通过自定义相册来介绍photo library的使用
因为我在模仿美图秀秀的功能,在使用相册时候,UIImagePickerController本来就是一个UINavigationController的子类,所以没有办法使用push,所以做了一个自定义的 ...
- Spark程序使用groupByKey后数据存入HBase出现重复的现象
最近在一个项目中做数据的分类存储,在spark中使用groupByKey后存入HBase,发现数据出现双份( 所有记录的 rowKey 是随机 唯一的 ) .经过不断的测试,发现是spark的运行参 ...
- HTML5 input事件检测输入框变化
之前一直用change事件来监听输入框内容是否发生变化,只有当输入框失去焦点时才会触发,没想到html5还有个input事件,只要输入框内容发生变化就会立即触发,既然有这么好的东西我们干嘛放着不用呢, ...
- C#如何调用COM
这章中描述的属性被用在创建和COM程序交互的程序中. 1.1 COMImport 属性 当被放在一个类上, COMImport 属性就把这个类标记为一个外部实现的COM 类.这样的一个类声明使得可以 ...
- 使用 TOP 限制更新的数据
可以使用 TOP 子句来限制 UPDATE 语句中修改的行数.当 TOP (n) 子句与 UPDATE 一起使用时,将针对随机选择的 n 行执行删除操作.例如,假设您要为一位高级销售人员减轻销售负担, ...