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渗投到各个行业:电商(淘宝.京东等 ...
随机推荐
- 在linux中安装mysql5.7
安装前准备: 确保你的CentOS6.10使用的镜像url是可被访问的!!(可参考文章:https://blog.csdn.net/qq_39946015/article/details/111086 ...
- CF构造题1600-1800(2)
H. Hot Black Hot White(COMPFEST 14 - Preliminary Online Mirror (Unrated, ICPC Rules, Teams Preferred ...
- linux环境编程(2): 使用pipe完成进程间通信
1. 写在前面 linux系统内核为上层应用程序提供了多种进程间通信(IPC)的手段,适用于不同的场景,有些解决进程间数据传递的问题,另一些则解决进程间的同步问题.对于同样一种IPC机制,又有不同的A ...
- Flutter新版本2.X系列--01创建项目
1.新建项目,打开Android studio,点击红圈部分 2.选择第一个 3.设置你的项目名称,flutter sdk位置,以及项目存储路径 4.设置包名,这个要唯一 5.好啦 ~ 作为一名前端开 ...
- python命令行参数argparse常用命令
1.参数个数控制 parser.add_argument('-i', '--integers', nargs='?', const=100, type=int, help='input a numbe ...
- Python装饰器实例讲解(一)
Python装饰器实例讲解(一) 多种角度讲述这个知识,这是个系列文章 但前后未必有一定的顺承关系 部分参考网络 本文以一个小案例引出装饰器的一些特点,不涉及理论,后面再谈 案例 写一个代码来求一个数 ...
- python自动发布-优化版本
import sys import time import os import paramiko from pygments.lexers import shell baseconfig = { &q ...
- JAVA虚拟机21---JAVA内存模型
1.Amdahl定律和摩尔定律 并发处理的广泛应用是Amdahl定律代替摩尔定律成为计算机性能发展源动力的根本原因,也是人类压榨计算机运算能力的最有力武器. Amdahl定律通过系统中并行化与串行化的 ...
- 【爬虫+数据清洗+可视化分析】舆情分析哔哩哔哩"狂飙"的评论
目录 一.背景介绍 二.爬虫代码 2.1 展示爬取结果 2.2 爬虫代码讲解 三.可视化代码 3.1 读取数据 3.2 数据清洗 3.3 可视化 3.3.1 IP属地分析-柱形图 3.3.2 评论时间 ...
- P10_组件-text和rich-text组件的基本用法
常用的基础内容组件 text 文本组件 类似于 HTML 中的 span 标签,是一个行内元素 rich-text 富文本组件 支持把 HTML 字符串渲染为 WXML 结构 text 组件的基本使用 ...