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 ...
随机推荐
- Oracle Dataguard之Real-Time Apply
Oracle Dataguard一共支持三种模式:最大可用模式(Maximum Availability),最大性能模式(Maximum Performance),最大保护模式(Maximum Pro ...
- Android 网络通信API的选择和实现实例
Android开发网络通信一开始的时候使用的是AsyncTask封装HttpClient,没有使用原生的HttpURLConnection就跳到了Volley,随着OkHttp的流行又开始迁移到OkH ...
- Cordova webapp实战开发:(5)如何写一个Andorid下自动更新的插件?
在 <Cordova webapp实战开发:(4)Android环境搭建>中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个And ...
- Pig 实现关键词匹配
1. 问题描述 收集日志avro数据中有两个Map字段appInstall.appUse分别表示已安装的app.正在使用的app,且key值为app的名称,value值为app使用信息.现在要得到一份 ...
- Java魔法堂:JVM的运行模式
一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...
- oracle 表被锁了解决方案
使用下面的语句来查询被锁定的表: SELECT /*+ rule */ lpad(' ',decode(l.xidusn ,0,3,0))||l.oracle_username User_name, ...
- 音频文件解析(一):WAV格式文件头部解析
WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源. 文 ...
- 30天C#基础巩固----Lambda表达式
这几天有点不在状态,每一次自己很想认真的学习,写点东西的时候都会被各种小事情耽误,执行力太差.所以自己反思了下最近的学习情况,对于基础的知识,可以从书中和视频中学习到,自己还是需要注意下关于 ...
- android studio building project info 错误
D:\ProgramFiles\android-studio\plugins\android\lib\templates\gradle\wrapper\gradle\wrapper\gradle-wr ...
- [Asp.net 5] DependencyInjection项目代码分析
最近在研究开源代码,正好发现Asp.net5的源码,下载地址:https://github.com/aspnet. 今天主要讲的是DependencyInjection这部分,抛砖引玉,供大家参考,也 ...