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 ...
随机推荐
- 邻接矩阵无向图(二)之 C++详解
本章是通过C++实现邻接矩阵无向图. 目录 1. 邻接矩阵无向图的介绍 2. 邻接矩阵无向图的代码说明 3. 邻接矩阵无向图的完整源码 转载请注明出处:http://www.cnblogs.com/s ...
- 使用Ambari安装hadoop集群
最近需要做些spark的工作,所以弄了几台dell7500就这么准备开始搭建集群,之前用过几台更破的台式机搭建过一次,折腾了半个月之久,终于成功搭建,这次不想走老路,所以网上查了一下,发现一个神器AM ...
- html5的感想
作为一名前端攻城尸,每天必不可少的就是要学习新的知识,直到you get it. 今天,又一次学习了html5,每一次学习都会有新的感受. 1.记得第一次学习的时候只是觉得html5多了一些新的标签, ...
- Nodejs学习笔记(二)——Eclipse中运行调试Nodejs
前篇<Nodejs学习笔记(一)——初识Nodejs>主要介绍了在搭建node环境过程中遇到的小问题以及搭建Eclipse开发Node环境的前提步骤.本篇主要介绍如何在Eclipse中运行 ...
- AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
- 百度,淘宝,腾讯三大巨头HTML页面规范分解
[兼容html5方案] 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){ var tags = ['header','f ...
- 简单设置,解决使用webpack前后端跨域发送cookie的问题
最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项 ...
- 五、BLE(下)
1.1 GATT server Service 通过走读代码, GATT Server作为一个GATT service,我是没有发现其发挥了多大功能,其负责处理的消息GATT_SERVER ...
- Sql去重语句
海量数据(百万以上),其中有些全部字段都相同,有些部分字段相同,怎样高效去除重复? 如果要删除手机(mobilePhone),电话(officePhone),邮件(email)同时都相同的数据,以前一 ...
- node.js下when.js(Promises/A)的实践
假设一个业务场景: 通过rss地址,获取rss并保存于文件,rss地址保存于文件中. 完成该场景的业务需要完成3个任务: 1.从文件中读取rss地址. 2.获取rss. 3.保存于文件. 最后将这三个 ...