ionic项目之ngcordova插件之camera

参考文章

https://github.com/driftyco/ng-cordova

http://ngcordova.com/docs/plugins/camera/

官方解释是既可以用来拍照也可以录视频(只试用了拍照功能)

 

首先,装插件  cordova plugin add org.apache.cordova.camera

然后,如果之前配置过ngcordova的话,就直接在控制器加上$cordovaCamera就好了

有两种方法获取拍照得到的图片

1,拍照返回64位的图片数据(destinationType: Camera.DestinationType.DATA_URL)

2,拍照返回图片文件的实际存储地址(destinationType: Camera.DestinationType.FILE_URI)

 

1,拍照返回64位的图片数据(成功了,可是图片数据即使100%的质量也很不清晰)

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
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      var image = document.getElementById(‘myImage‘);
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      // error
    });

2,拍照返回图片文件的实际存储地址(实验不成功,暂没找到问题)

var options = {
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
    };

    $cordovaCamera.getPicture(options).then(function(imageURI) {
      var image = document.getElementById(‘myImage‘);
      image.src = imageURI;
    }, function(err) {
      // error
    });

    $cordovaCamera.cleanup().then(...); // only for FILE_URI
把这句话去了就正常了(暂时没看到这句话有什么影响) $cordovaCamera.cleanup().then(...); // only for FILE_URI

 返回的图片地址信息为(file:///storage/emulated/0/DCIM/Camera/pic.jpg)与选取图片文件插件方法返回的图片地址(data/data下)不一样  

  

时间: 2024-10-10 19:27:33

ionic项目之ngcordova插件之camera的相关文章

ionic项目之ngcordova插件

一,$cordovaDialogs(对话框插件) http://ngcordova.com/docs/plugins/dialogs/ 有一个问题是浏览器上运行和移动设备上运行的确定和取消按钮的位置是反的(移动设备上是正确的) 也可以用ionic的http://www.ionicframework.net/docs/api/service/$ionicPopup/(没试,忘了ionic自己有) 二,$cordovaToast(短消息插件) http://ngcordova.com/docs/pl

Ionic系列——使用ng-cordova插件

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 Cord

Ionic 开发之旅 一(搭建基本工程)(使用ngCordova插件)(开发自己的ngCordova插件)

闲言少叙,直接开始代码: 1.ionic  start   faces  默认tab样式工程 ionic platform add  [email protected]   可以不指定sdk版本,默认最新的. ionic  build android    编译成android工程 ionic  run  android      链接手机 直接build  并且安装到手机 2.使用ngCordova插件 访问本地属性.只能在真是手机上测试 bower install ngCordova 或者直

ionic项目中实现发短信和打电话

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic-sms-and-call/ 最近做的一个ionic项目中需要实现发短信和打电话,总结了一下遇到的问题和实现的方法. 1.关于打电话 在html中可以很方便的实现拨打电话先在config.xml中添加: <access origin="tel:*" launch-external="yes"/> 然后在html中这样写:

ionic项目之图片的选择与上传

由于ionic框架是基于angularJS的,开发hybrid app混合应用的,但angularJS本身没有太多对移动设备硬件的支持,所以找到两种方法解决这个问题! 一,ngCordova插件:ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用移动设备的功能,即可以在AngularJs代码中访问设备的Api 二,html5plus:最近比较火的一个东西,也是为了解决有关html5移动app去调用移动

Ionic项目中使用极光推送-android

对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin 插件,也有相关的实现实例:GitHub地址 ,但是使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用(自己也没有试可不可以). 于是选择国内的消息推送服务,主要有:百度云推送,腾讯信鸽,极光推送,yunba 等等,其中只有极光推送官方提供了phonegap/cordov

ionic start 创建ionic项目报错,及解决过程

问题描述: 前一次创建利用命令行创建ionic项目一次性成功,第二次没有运行: $ npm install -g ionic cordova 直接运行: ionic start ionicDemo 出现上图错误: × Running command - failed!Exception: npm ERR! path C:\work\ionicdemo\node_modules\fsevents\node_modulesnpm ERR! code EPERMnpm ERR! errno -4048

如何给Ionic写一个cordova插件

写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了... 在正式写下文之前,我先感谢公司大boss:王总,感谢他让我进入了一个有挑战性的技术公司 并在这个过程中一直鼓励我不断汲取新技术,同时也指正了我在开发中的一些不太好的习惯,十分感谢! 再~,感谢在开发中给予我太多帮助的杜勇以及孙金~,不论是需求讨论还是具体开发阶段都会给予一些十分有用的思

asp.net项目引用silverlight插件

其实很简单,silverlight4中,只需要新建一个silverlight项目,找到启动的aspx或html页面,复制引用代码到asp.net项目的aspx即可,同时在项目中引用silverlight项目下的silverlight.js.说实话.其实在这个方面现在来说两者是一样的,目前发现区别在于启动方式?silverlight需要加载一个xaml启动,asp.net则不需要,可以做到加载多个xaml的效果,从跟html兼容这方面来说,效果要比用silverlight项目好. 引用代码: sc