ionic ngcordova camera
拍照是經常用到的,所以記錄一下 拍照的代碼...
1.
ionic start camera blank
cd camera
ionic platform add ios
2. 添加插件,這裏很熟悉....
cordova plugin add org.apache.cordova.camera
3.
可以從這裏下載 ngcordova.min.js 或者ngcordova.js
然後添加到www/lib/ionic/js 文件夾下 (不強求....)
4.在index.html 引用ngcordova.min.js 如下 必須在cordova.js之前
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
--> <!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) -->
<script src="lib/ionic/js/ng-cordova.min.js"></script>
<script src="cordova.js"></script> <!-- your app's js -->
<script src="js/app.js"></script>
</head>
5. 在app.js中 聲明引用了 ngcordova
如
angular.module('starter', ['ionic','ngCordova'])
6. 添加控制器 在app.js中
如
.controller("cameraController", function($scope, $cordovaCamera) { $scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
}; $cordovaCamera.getPicture(options).then(function(imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function(err) {
// An error occured. Show a message to the user
});
} });
7.在 index.html中顯示 調用
<body ng-app="starter"> <ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic camera demo</h1>
</ion-header-bar>
<ion-content ng-controller="cameraController">
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
<button class="button" ng-click="takePicture()">Take Picture</button>
</ion-content>
</ion-pane>
</body>
ionic ngcordova camera的更多相关文章
- ionic ngCordova插件安装
ngCordova的安装配置 官网提供了两种安装的方法: 1. 使用bower来安装 2. 下载zip文件 推荐使用bower安装,在使用bower之前,我们电脑中需要先配置bower.bower的配 ...
- ionic ngcordova map 地圖
幾乎每個APP都會有地圖 所以在這裏記錄一下 1.在index.html 中 <script src="https://maps.googleapis.com/maps/api/js? ...
- ionic ngcordova barcodescanner
二維碼掃描 最近有一個項目用到了 二維碼的掃描 總結一下 記錄一下 1. ionic platform add ios 2. 添加插件 cordova plugin add https://gi ...
- ionic 照相机 Camera
1.官网: https://ionicframework.com/docs/native/camera/#DestinationType 2.引入插件 $ ionic cordova plugin a ...
- Ionic开发实战
转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...
- 170多个Ionic Framework学习资源(转载)
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
- 初识ionic
1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http://nodejs.org/ 安装完成之后打开PowerShell输入命令 ...
- ionic实战系列(二):使用cordova插件
本章主要关注cordova的各种插件,利用好手机(移动设备)的原生功能.首先cordova是一个将web网页内嵌到原生app的平台(核心功能),然后cordova拥有的插件系统扩展了核心功能. Cor ...
- ionic使用方法
windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...
随机推荐
- sqlite数据库执行full outer join
sqlite数据库执行full outer join时提示:RIGHT and FULL OUTER JOINs are not currently supported. sqlite数据库不支持(+ ...
- ADF_ADF Faces系列3_ADF数据可视化组件简介之建立Master-Detail
2013-05-01 Created By BaoXinjian
- POJ 1269 Intersecting Lines(计算几何)
题意:给定4个点的坐标,前2个点是一条线,后2个点是另一条线,求这两条线的关系,如果相交,就输出交点. 题解:先判断是否共线,我用的是叉积的性质,用了2遍就可以判断4个点是否共线了,在用斜率判断是否平 ...
- C++多态的实现及原理详细解析
C++多态的实现及原理详细解析 作者: 字体:[增加 减小] 类型:转载 C++的多态性用一句话概括就是:在基类的函数前加上virtual关键字,在派生类中重写该函数,运行时将会根据对象的实际类型 ...
- 时间c#
无论Time.timeScale 等于多说Update和LateUpdate都会去执行 Time.timeScale会影响FixedUpdate的速度. Time.timeScale还会影响Time ...
- 启动httpd服务:SSLCertificateFile: file '/var/www/miq/vmdb/certs/server.cer' does not exist or is empty
启动httpd服务,失败: [root@test vmdb]# service httpd restart Stopping httpd: [FAILED] Starting httpd: Synta ...
- 30天轻松学习javaweb_Range实现断点续传
package com.wzh.test.http; import java.io.FileOutputStream; import java.io.IOException; import java. ...
- 使用python + tornado 做项目demo演示模板
很简单,可是却也折腾了不是时间,走了不少弯路.在此备注记录一下,以供后需. # web_server.py #!/usr/bin/env python # coding=utf-8 import os ...
- JDK环境变量中dt.jar、tools.jar等变量值的作用
变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; tools.jar: 工具类 库,它跟我们程序中用到的 基础 ...
- oracle—无法启动
pl/sql连接oracle,出现下列错误,即没有启动该数据库的监听程序 启动该数据库的监听程序,出现如下错误,即未配置监听器 配置监听器