引入ng-cordova

2017-05-26 09:30:22 zuoyiran520081 阅读数 3017

首先,引入cordova和ng-cordova的js:

<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>

第二步:在模块内加上ngCordova:

angular.module('starter.controllers', ['ionic', 'ionic-img-lazy-load', 'ionicLazyLoad','ngCordova'])

第三步:在控制器内加上依赖:

.controller('AccountCtrl',function($scope,dataInfo,$cordovaCamera) {})

完整代码:
html:

<button class="button button-bar" ng-click="takePic()">点击我试着打开照相机</button>
<img id="myImage" alt=""/>     <!-- 这里是放你拍照返回的照片 -->

js:

//调用相机插件
$scope.takePic=function(){
  var options = {
                                                              //这些参数可能要配合使用,如选择了sourcetype是0,destinationtype要相应的设置为1:【返回文件的URI(content://media/external/images/media/2 for Android)】
      quality: 50,                                            //相片质量0-100
      destinationType: Camera.DestinationType.FILE_URI,       //返回类型:DATA_URL= 0,返回作为 base64 編碼字串。 FILE_URI=1,返回影像档的 URI。NATIVE_URI=2,返回图像本机URI 
      sourceType: Camera.PictureSourceType.CAMERA,            //从哪里选择图片:PHOTOLIBRARY=0(从设备相册选择图片),相机拍照=1,SAVEDPHOTOALBUM=2,0和1其实都是本地图库
      allowEdit: true,                                        //在选择之前允许修改截图
      encodingType:Camera.EncodingType.JPEG,                  //保存的图片格式: JPEG = 0, PNG = 1
      targetWidth: 200,                                     //照片宽度
      targetHeight: 200,                                    //照片高度
      mediaType:0,                                            //可选媒体类型:圖片=0,默认值,只允许选择图片將返回指定DestinationType的参数。 視頻格式=1,允许选择视频,最终返回 FILE_URI(网址)。ALLMEDIA= 2,允许所有媒体类型的选择。
      cameraDirection:0,                                      //选择摄像头类型(前置摄像头或者后面的摄像头):Back= 0(后置),Front-facing = 1(前置)
      popoverOptions: CameraPopoverOptions,                   //CameraPopoverOptions,iOS特供,从iPad的系统相册选择图片,指定popover的定位元素的位置箭头方向和参数
      saveToPhotoAlbum: true                                  //保存进手机相册
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {//alert(imageData);
      var image = document.getElementById('myImage');
      image.src=imageData;
  }, function(err) {
      alert("err的值:"+err)
  });
};

注:上面代码会出现一个问题,就是拍摄的照片成像效果很差,不想要这种效果的话,建议不设置targetWidth和targetHeight(照片的宽高),在css里面去设置这个img标签的样式,例如:

#myImage{
            width: 100%;
            height: 100%;
            max-width: 600px;
        }

附上这个插件文档的中英文说明供参考:
cordova-plugin-camera 插件说明文档
中文文档
英文文档

2016-04-11 18:57:12 QQ417431233 阅读数 4743

1、配置环境,配置调用摄像头所需要的插件ng-cordova

我是离线下载:http://ngcordova.com/docs/install/
这里写图片描述

2、引入ng-cordova.js文件

ng-cordova.js在步骤1或的包里面,路径:ng-cordova-master\dist
将ng-cordova.js引入到index.html中并放在cordova.js之前,AngularJS Ionic文件以后,因为之间存在依赖关系;

<script src="js/ng-cordova.js"></script>
 <script src="js/cordova.js"></script>

3、在config配置中引入ng-cordova的依赖

angular.module(‘starter’,[‘ionic’,’ngCordova‘,’starter.controllers’,’starter.directive’,’starter.config’,’starter.services’,’ngResource’])
.config(function(stateProvider,urlRouterProvider,$ionicConfigProvider){
……
}

4、在相应的html中对应的controllers中使用,$cordovaCamera

angular.module('starter.controllers', ["ionic"])
 .controller('homeController',function($scope,ENV,$cordovaCamera) {
        $scope.title='首页';
        $scope.name='homeController';
        $scope.env=ENV;
        $scope.goCamera=function(){
            console.log('goCamera');
            $scope.show_camera=true;
            var options = {
                      quality: 50,
                      destinationType: Camera.DestinationType.DATA_URL,
                      sourceType: Camera.PictureSourceType.CAMERA,
                      allowEdit: true,
                      encodingType: Camera.EncodingType.JPEG,
                      targetWidth: 100,
                      targetHeight: 100,
                      popoverOptions: CameraPopoverOptions,
                      saveToPhotoAlbum: false,
                      correctOrientation:true
                    };

            $cordovaCamera.getPicture(options).then(function(imageData) {
              $scope.imageSrc="data:image/jpeg;base64," + imageData;
              $scope.show_camera=false;
            }, function(err) {
                console.log("摄像头保存照片失败");
            });         
           };
    })

如上,goCamera()方法被ionic css中调用;
更多了解$cordovaCamera的使用,官方解释:
http://ngcordova.com/docs/plugins/camera/

5、上传一个实例,是phonegap100,树根老师讲的例子+自己写了调用摄像头的案例,给各位学习。以后还会添加功能,代码如下:
http://download.csdn.net/download/qq417431233/9487749

2015-09-09 15:51:27 shenshucong520 阅读数 8817

Ionic只是个前端框架,与bootstrap差不多,不过他是专门为移动端设计的, 在效果上接近原生的app,如果你的应用只涉及到前端的东西,那么你可能不会涉及到ngCordova插件,这是phoneGap的改名叫法。如果我们应用要用到一些底层的东西,如:拍照,文件,数据库,状态栏,设备等等这些原生的东西,那么你就得要好好的学习下ngCordova提供的想着插件。在这里给出ngCordova的官网安装地址,接下来会用中文简介下步骤,方便天朝不想看英文的同仁,地址:安装步骤
在官网上提供了两种方法安装:

  1. 使用bower来安装,前提是你得安装了bower,而且相关权限要配置好了,然后一条命令解决,命令如下:bower install ngCordova,安装bower在此不再说明,自行查百度。
  2. 直接下载源文件,然后拷贝到相关目录下,简单直接,本人就喜欢这样的,下载地址官网也给出,在此再列出:下载,他是开源的,源文件放在github上,github就不要再说了吧,搞程序的都知道,地址:https://github.com/driftyco/ng-cordova

如果你是下载源文件的方法,记得把文件目录中的dist目录拷贝到你的应用目录中,比如:
这是下载后的目录

直接拷贝dist目录到你的应用www/lib/ngCordova/dist下,目录随便了,在引入的时候路径对就行了。
拷贝完成后,就要在index.html文件中的cordova.js文件前引入,如:

<!-- cordova script (this will be a 404 during development) -->
    <script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

然后注入到你的angular模块中,本人的在app.js中,如:

var app = angular.module('starter', ['ionic','ngCordova']);

到了这步,设置已经完成了,接下来是使用他,官网建议在使用是判断设备是否就绪,如:

document.addEventListener("deviceready", function () {
  $cordovaPlugin.someFunction().then(success, error);
}, false);

// OR with IONIC

$ionicPlatform.ready(function() {
  $cordovaPlugin.someFunction().then(success, error);
});

我们一般使用是在controller中,在使用之前记得要添加相关的插件到我们工程中才能使用,比如本人的应用,在初始化时ionic已经添加了一定的插件,你可以查看你的plugin目录查看相关插件。
最后是怎么使用他,本人列出我自己使用的一个小demo,使用插件$cordovaDevice,获取平台信息,如:

module.controller('HomeCtrl', function($scope, $cordovaDevice) {
    $scope.isIOS = function(){
        //Returns String — eg: "iOS", "Android", "WinCE"
        var platform = $cordovaDevice.getPlatform();
        platform = platform.toLowerCase();
        if(platform == "iOS"){
            return true;
        }
        return false;
    }
})

了解更多想着插件的使用方法,请访问官网,官网插件地址

下期继续!!!!!!!!!!!!

2017-02-17 11:02:48 weixin_34055910 阅读数 24

其实我觉得gitHub上的文档说的已经很详细了,但是鉴于是一个比较常用的插件以及貌似使用方法稍微的要比ng-camera那样看起来简单点,所以这里稍微的写写记录下

$cordovaFileTransfer的用处:用于文件的上传和下载,图片表单等等

$cordovaFileTransfer支持上传、下载等,这里我们暂且说下文件的上传,此处用图片举例

需求:拍照、查看、上传

具体实现:

前端代码:

<ons-list-item class="list-item-ons" style="padding: 0;margin-top: 0.5em" ng-repeat="picture in pictures" ng-init="index = $index+1">
     <ons-carousel style="height: 3.2em;width: 180%;" swipeable item-width="60%" auto-scroll var="carouselCamear">
         <ons-carousel-item class="list-action-menu">
             <ons-row>
                 <ons-col width="5">
                     <div class="divBorder{{index}}"></div>
                 </ons-col>
                 <ons-col width="10%">
                     <div class="divCircle">
                         <div class="circleValue">{{index}}</div>
                     </div>
                 </ons-col>
                 <ons-col width="40%">
                     <div class="divDate">现场拍照</div>
                 </ons-col>
                 <ons-col ng-click="takePicture($index)">
                     <div class="divImg">
                         <img class="imgValue"
                              src="images/camera.png">
                     </div>
                 </ons-col>
                 <ons-col width="5%" style="text-align: right" ng-if="picture.value">
                     <div class="checkLine"></div>
                 </ons-col>
                 <ons-col ng-if="picture.value" ng-click="checkPic($index)">
                     <div class="check">查看</div>
                 </ons-col>
             </ons-row>
         </ons-carousel-item>
         <ons-carousel-item class="list-action-item">
             <p style="height:60px;background-color: #ffa500;color:white;margin: -10px;padding-left: 11%;line-height: 60px">
                 <ons-icon icon="fa fa-trash-o"></ons-icon>
             </p>
         </ons-carousel-item>
     </ons-carousel>
 </ons-list-item>

这里用到onsen中的carousel,当然,这里不需理会主要也就是ng-repeat

$scope.pictures = [
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""},
     {value: false, imgSrc: ""}];

其中在图片上传中最主要的是imgSrc

上传的代码如下(我这里是写在factory里面,因为可以共用):

upLoad:function(imgRul,tempParam,success,error){
     try{
         var options = new FileUploadOptions();
         options.filekey = "file";
         options.fileName = "test.jpg";
         options.mimeType = "image/jpeg";
         options.chunkedMode=false;
         options.params = tempParam;
 
         var fileTransfer = new FileTransfer();
         fileTransfer.upload(
             imgRul,
             encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),
             success,
             error,
             options
         );
     }catch(e){
         showAlert('提示',e);
     }
 }

简明说下里面主要的东西

第一是上传:

fileTransfer.upload(
     imgRul,
     encodeURI("http://222.92.140.204:8080/hms-furui/afwkFile/upload"),
     success,
     error,
     options
 );

其中第一个参数是图片在本地的URL地址,第二个参数是service地址,官网文档是encoded by encodeURI();当然我们都知道这里是为了防止乱码。第三个和第四个参数是成功和失败的回调函数,这些都很简单,最后一个options貌似有些讲究,展开说下:

Options是可选的一些参数,通过var options = new FileUploadOptions()获取出来(插件封装好的)

然后填充options中的一些属性值

1、 fileKey:这个元素的名称,服务端通过这个拿,我的理解是个key

2、 filename:上传的文件存在服务端的名称,默认是image.jpg

3、 httpMethod:顾名思义,http的请求方式,默认是post

4、 mimeType:一种标准,默认的是image/jpeg

5、 params:参数,这里面放的是一个对象,除了传过去图片还有别的一些信息啦,比如id啊啥啥啥乱七八糟的都在这里,有用!

当然还有别的一些东西貌似我们也不怎么用到

也就这么简单,我们就可以实现图片的上传了

但是很郁闷,这里我要实现过个图片的上传,说实话我从官网文档中并没有找到怎么实现过个图片的上传,我觉得是可以的,因为官网有这么一句话:                                               S!有木有,但是文档中又有这句话a!有木有!

好了,这些都先不去在意了吧,我再查查和问问怎么实现一次传送多个图片,目前我的实现方式是(当然也还是不怎么完美的):

//保存上传图片
 $scope.upLoad = function () {
     var errorCount = 0;
     var success = function (r) {
         errorCount += 1;
     };//成功的毁掉函数
     var error = function (error) {
         errorCount += 1;
         showAlert('提示', "第" + errorCount + "张图片上传失败!上传终止!");
         return;
     };
     var tempParam = {
         "document_id": orderId,
         "document_type": orderStatus,
         "created_by": user,
         "url": "pictures"
     };
     for (var i = 0; i < $scope.pictures.length; i++) {
         if ($scope.pictures[i].imgSrc != "") {
             var imgUrl = $scope.pictures[i].imgSrc;
             workOrderFactory.upLoad(imgUrl, tempParam, success, error);
         }
     }
     showAlert('提示', '图片上传成功!');
 };

判断$scope.pictures[i].imgSrc有木有值,有的话,就传,失败就停止!如何判断失败停止,我这里加了个变量:errorCount,每次上传一张的时候就会调用回调函数,error,或者success,我在success里面每次成功就+1,方便提示第几张上传错误,在error里面给出提示信息,并且终止函数的继续。如果没有遇到return,则说明图片都上传成功了,所以也同样给出提示信息。

一般我会觉得不会出现错误的,因为一点击保存,就跳出来图片上传成功,快到真的不敢相信(我不知道是不是还存在异步的问题,但是至少目前我测试的都是么有问题的)

后续如果还有更好的一次上传多个图片的方法会陆续整理。如果有bug也会及时来修改!

好吧,暂且说到这里咯n(≧▽≦)n

2017-04-09 19:08:00 weixin_30652897 阅读数 6

1、cordova介绍
    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
    Cordova支持如下7种移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
    Cordova是贡献给Apache后的开源项目,是从phonegap中抽出的核心代码,目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字,这会持续一段时间。
2、ng-cordova介绍
    ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。

115810f6t6qfkp26xd6pb1.jpg

3、ng-cordova安装与使用


1、下载ng-cordova
bower install ngCordova
2、引入ng-cordova.js文件
    把 ng-cordova.js 或者 ng-cordova.min.js引入index.html中并放在cordova.js之前, AngularJS ionic 文件之后 (因为ngCordova d依赖AngularJS).
4、引入ng-cordova的依赖
    在主程序的app.js中引入ng-cordova的依赖
angular.module(‘myApp‘, [‘ngCordova‘])
5、添加插件到你的Cordova CLI环境中
cordova plugin add ...
6、使用
    要在检查设备准备完毕之后使用
document.addEventListener("deviceready", function () { 
    $cordovaPlugin.someFunction().then(success, error);
}, false);
// OR with IONIC
$ionicPlatform.ready(function() {
      $cordovaPlugin.someFunction().then(success, error);
});
不过我测试过,因为已经run过了,你的各种功能肯定在这之后,所以之后在哪用都可以。不过要是有些功能是启动应用就要有,还是要写在这里面的。
angular.module(‘starter‘, [‘ionic‘, ‘route‘,‘config‘,‘global‘,‘commonJs‘,‘ngCordova‘])
.run([‘$ionicPlatform‘,‘$rootScope‘, ‘$location‘, ‘$timeout‘, ‘$ionicHistory‘,‘CommonJs‘,‘$cordovaToast‘,function($ionicPlatform,$rootScope, $location, $timeout, $ionicHistory,CommonJs,$cordovaToast) {
  $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
}]);
7、官网
ng-cordova插件集合:http://ngcordova.com/docs/plugins/

转载于:https://www.cnblogs.com/Jeely/p/6685914.html

cordova插件使用

阅读数 2975