ionic混合开发总结之调用手机相机
整理一下,给接触ionic的伙伴们一些参考,少走弯路。
调用手机的前提是已经成功创建了项目。
首先,要下载两个插件,一个是 cordova-plugin-camera,是调用相机的插件,还有一个是NgCordova,具体命令自己百度,网上很多。
下载完NgCordova后,不要忘记在app.js里面添加依赖,其中的ngCordova就是依赖,
var app = angular.module('starter', ['ionic', 'ngCordova','starter.controllers','starter.loginController'
,'starter.zoufang','starter.zaixian',
'starter.tongbao','starter.wentishouji','starter.zhanshiController','starter.zerenController'])
定义调用相机的方法,这里是拍照不能超过九张。
其中options为调用相机时设置的参数,
destinationType为拍摄完成后返回的数据格式,此处为base64编码,
sourceType 为是从相机拍摄还是从相册选择,此处为相机拍摄
saveToPhotoAlbum为是否保存到手机相册中
其中需要注意的是controller中不要忘记添加 $cordovaCamera
其中的图片上传的方法自行忽略,这里为后台给出的方法,
拿到imageData,就可以做一些处理了,不论是上传,还是显示都可以操作了。
1 $scope.getCamera = function(){
2 if($scope.data.y_image.length<9){
3 var options = {
4 quality: 70,
5 destinationType: Camera.DestinationType.DATA_URL,
6 sourceType: Camera.PictureSourceType.CAMERA,
7 //allowEdit: true,
8 encodingType: Camera.EncodingType.JPEG,
9 targetWidth: 480,
10 targetHeight: 720,
11 popoverOptions: CameraPopoverOptions,
12 saveToPhotoAlbum: false
13 };
14 $cordovaCamera.getPicture(options).then(function(imageData) {
15 var imagedata = imageData;
16 $scope.data.isimage = true;
17 $ionicLoading.show({
18 template: '图片上传中...'
19 });
20 client.UpdateImage(imagedata, function (result) {
21 $ionicLoading.hide();
22 $scope.data.y_image.push({'src':"data:image/jpeg;base64," + imageData,'val':'/Yuonhtt_FileUpload/img/'+result});
23 $scope.$digest();
24 }, function (name, err) {
25 alert(err);
26 });
27 }, function(err) {
28 console.log(err);
29 });
30 }else{
31 var confirmPopup = $ionicPopup.alert({
32 title: '提醒',
33 template: '上传图片超过9张!',
34 okText:'确 认',
35 okType:'button-assertive'
36 });
37 confirmPopup.then(function(res) {
38 });
39 }
40
41 };
ionic混合开发总结之调用手机相机的更多相关文章
- uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...
- Cordova+Angularjs+Ionic 混合开发入门讲解
作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...
- H5混合开发二维码扫描以及调用本地摄像头
今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...
- 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 基于ionic+angulajs的混合开发实现地铁APP
基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...
- 移动端混合开发----ionic
目前移动端分为三大主流:纯原生.混合开发.web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS ...
- .NET混合开发解决方案10 WebView2控件调用网页JS方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案12 网页JS调用C#方法访问WinForm或WPF窗体
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- IOS-Hybrid(混合开发)
http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1. APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...
随机推荐
- 【开源】基于.net6+gtksharp实现的Linux下的图形界面串口调试工具
背景 22年初从上家互联网公司离职以后,充分认识到互联网行业的风险,公司在没有自身稳定产品的情况下,互联网行业就是一个烧钱的行业,支出远远大于收入来源,上家公司就是如此,12年的公司转瞬间轰然倒地,1 ...
- ssm——springMVC整理
目录 1.概念 1.1.什么是SpringMVC 1.2.B/S架构 1.3.MVC结构 1.4.Spring MVC常用名词 1.5.常用注解 1.6.rest和restfull 1.7.Reque ...
- [数据与分析可视化] D3入门教程1-d3基础知识
d3.js入门教程1-d3基础知识 文章目录 d3.js入门教程1-d3基础知识 1 HTML介绍 1.1 什么是HTML? 1.2 自定义文档样式CSS 1.3 构建svg图形 2 d3绘图入门 2 ...
- linux下redis_单机版_主从_集群_部署文档
一 单机版部署 1.1 Redis下载地址 http://download.redis.io/releases/ 本次部署版本:3.2.8 当前最新版本:5.0.5 1.2 安装 部署路径说明规划 / ...
- Maven项目中导入坐标依赖时报(Failure to transfer....)的错的问题
Maven项目中导入坐标依赖时报(Failure to transfer....)的错的问题 今天在做Spring MVC的一个项目时导入坐标依赖的时候突然网断了一下(村里网络日常不稳定),然后就 ...
- DVWA靶场实战(十)——XSS(DOM)
DVWA靶场实战(十) 五.XSS(DOM): 1.漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...
- mongdb遭遇勒索,用备份进行数据恢复
mongdb遭遇勒索,用备份进行数据恢复 1.背景: 某台MongoDB服务器,没有配置用户名密码,放到公网不到一天,遭到删库勒索 All your data is a backed up. You ...
- 在spring boot3中使用native image
目录 简介 安装GraalVM 添加Native Image支持 构建spring boot3应用 总结 简介 在之前spring boot3文章中我们介绍了,spring boot3的一个重要特性就 ...
- 笔记本USB接口案例_分析-笔记本USB接口案例_实现
笔记本USB接口案例_分析 笔记本电脑(laptop)通常具备使用USB设备的功能.在生产时,笔记本都预留了可以插入USB设备的USB接口, 但具体是什么USB设备,笔记本厂商并不关心,只要符合USB ...
- vulnhub靶场之DIGITALWORLD.LOCAL: VENGEANCE
准备: 攻击机:虚拟机kali.本机win10. 靶机:digitalworld.local: VENGEANCE,下载地址:https://download.vulnhub.com/digitalw ...