整理一下,给接触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混合开发总结之调用手机相机的更多相关文章

  1. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  2. Cordova+Angularjs+Ionic 混合开发入门讲解

    作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...

  3. H5混合开发二维码扫描以及调用本地摄像头

    今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底 ...

  4. 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  6. 移动端混合开发----ionic

    目前移动端分为三大主流:纯原生.混合开发.web App,随着手机硬件的升级,公司们似乎偏好于web页面开发,而混合开发相对纯web App似乎更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS ...

  7. .NET混合开发解决方案10 WebView2控件调用网页JS方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  8. .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  9. .NET混合开发解决方案12 网页JS调用C#方法访问WinForm或WPF窗体

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  10. IOS-Hybrid(混合开发)

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

随机推荐

  1. 16、SQL操作JSON字段

    Mysql5.7版本以后提供一个原生的Json类型,Json值将不再以字符串的形式存储,而是采用一种允许快速读取文本元素(document elements)的内部二进制(internal binar ...

  2. day04-Vue01

    Vue01 1.Vue是什么? Vue(读音/vju:/,类似于view)是一个前端框架,依据构建用户界面 Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或者项目整合 支持和其他类库结合使 ...

  3. 虚拟化技术浅析第二弹之初识Kubernetes

    作者:京东物流 杨建民 一.微服务架构起源 单体架构:可以理解为主要业务逻辑模块(我们编写的代码模块,不包括独立的中间件)运行在一个进程中的应用,最典型的是运行在一个Tomcat容器中,位于一个进程里 ...

  4. 刷题笔记——3002.买图书 & 2763.计算(a+b)/c的值

    题目1 3002.买图书 代码 while True: try: n,m=map(float,input().strip().split()) if(n==10 and m==1): print('{ ...

  5. MySQL 判断语句 条件函数 case when、if、ifnull

    在MySQL中,需要用到条件判断函数,例如 case when.if.ifnull. 一.方法分类 二.具体方法 (1)if if(expr,result_true,result_false) 注意: ...

  6. win32com操作word API精讲 第六集 Range(四)对齐和缩进

    本课程<win32com操作word API精讲&项目实战>同步在B站.今日头条.视频号及本公众号发布.其中本公众号以发布文字教程为主. 今天是大年初二,一灯在此祝愿各位朋友兔年吉 ...

  7. NG-ZORRO + Angular11增加自定义全局样式,不影响其他页面全局样式,仅作用于当前页面

    实现只需要两步 ts import { ViewEncapsulation } from '@angular/core';// 关键代码 @Component({ selector: 'app-tes ...

  8. 【Django drf】视图类APIView之五层封装 ApiView的类属性 drf配置文件

    目录 ApiView的类属性 drf 配置文件之查找顺序 drf之请求 APIView之请求相关配置 drf之响应 APIView之响应相关配置 Response对象属性 视图类 序列化类 路由 基于 ...

  9. docker搭建maven私服(nexus3),整合springboot上传下载依赖

    一.前言 我们在JavaWeb开发中必不可少的就是jar包管理-maven,在没有maven之前,都是自己手动下载jar包导入到项目中,非常的繁琐. maven出现之后,又迎来新的问题,对于仓库里人家 ...

  10. Vue21 组件

    1 模块及组件简介 组件(component)是vue.js最强大的功能之一.组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体. 每个组件都是Vue的实例 ...