ionic项目之图片的选择与上传
来源:互联网 发布:网络备份服务器 编辑:程序博客网 时间:2024/06/05 16:46
由于ionic框架是基于angularJS的,开发hybrid app混合应用的,但angularJS本身没有太多对移动设备硬件的支持,所以找到两种方法解决这个问题!
一,ngCordova插件:ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用移动设备的功能,即可以在AngularJs代码中访问设备的Api
二,html5plus:最近比较火的一个东西,也是为了解决有关html5移动app去调用移动设备功能的问题,但最最要命的就是它和AngularJs是完全分离的,两家的,所以基于angularJS的项目用html5plus去调移动设备的功能会有很多问题!
一,主要参考文章 http://haomou.net/2015/01/07/2015_ionic_fileOP/
http://ngcordova.com/docs/plugins/
https://github.com/driftyco/ng-cordova
1,(在此之前配置好ionic环境,安装好cordova,bower等)命令行进入到ionic项目下,安装ngcordova
命令行: bower install ngCordova
2,安装选择图片文件的插件
命令行: cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
3,安装文件上传的插件
命令行: cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
4,(安装完毕)修改index.xml文件(ng-cordova.js要放在cordova.js之前引入
,它们两个要放在ionic或angular的js文件之后引用)
<scriptsrc="lib/ngCordova/dist/ng-cordova.js"></script>
<scriptsrc="cordova.js"></script>
5,注入ngCordova依赖
angular.module('myApp',['ngCordova'])
6,在controller里添加$cordovaImagePicker模块,引入imagePicker方法
(返回的图片地址是file:///data/data/包名/cache/pic.jpg)
.controller('TodoCtrl', function($scope,<span style="color:#ff0000;">$cordovaImagePicker</span>) { $scope.images_list = []; // "添加附件"Event $scope.addAttachment = function() { nonePopover(); $ionicActionSheet.show({ buttons: [ { text: '相机' }, { text: '图库' } ], cancelText: '关闭', cancel: function() { return true; }, buttonClicked: function(index) { switch (index){ case 0:appendByCamera(); break; case 1: <span style="color:#ff0000;">pickImage();</span> break; default: break; } return true; } }); } //image picker var pickImage = function () { var options = { maximumImagesCount: 1, width: 800, height: 800, quality: 80 }; $cordovaImagePicker.getPictures(options) .then(function (results) { $scope.images_list.push(results[0]); }, function (error) { // error getting photos }); }})
7,页面
<div class="list"> <div class="item" ng-repeat="img in images_list"> <img src="{{img}}" width="100%"> </div> </div>
总结:事实证明此方法效果比较完美,没什么问题,基于angularJS的项目选择ngCordova插件就对了
二,要想在自己的项目中用html5plus有两种方法(
1,Android离线打包(http://ask.dcloud.net.cn/article/38)(最后导出apk报错,没找到问题)
2,HBuilder新建html5plus项目,导入你工程的其他文件(导入我的ionic项目用到的文件)
我用的第二种方法
1,获取图片的方法很简单(p是图片路径为本地图片的真实地址)
function appendByGallery() {plus.gallery.pick(function(p) { $scope.images_list.push(p)});}
总结:由于angularJS有数据变化自动刷新的机制,所以当选择图片后回到主界面时,图片数组数据增加了,应该刷新图片界面但未刷新(不能显示新加的图片,必须点击部分部位才会刷新)(点击例如一些按钮,输入框后图片刷新出来,可能是由于用了html5plus后,破坏了angularJS的自动刷新的机制,点击按钮等又唤醒了它的机制,于是刷新)。
所以暂时基于angularJS的项目,用html5plus去调移动设备的功能会有问题!
感谢 http://haomou.net/2015/01/07/2015_ionic_fileOP/ 很多知识从此博主的文章中获得
(建议最好按照步骤安装,此博主的demo我运行到手机总是报错,未找到原因,我的ionic项目可以正常运行,所以ionic和cordova的环境应该没什么问题)
项目地址http://download.csdn.net/detail/superjunjin/8417273
原项目来自于http://rensanning.iteye.com/blog/2072034
此项目是基于cordova环境的(请提前安装好cordova)
命令行找到项目目录,运行项目到真机 cordova run android(或创建apk cordova run android)
- ionic项目之图片的选择与上传
- ionic开发之用户头像修改-图片选择与上传
- ionic文件选择与上传
- ionic选择多张图片上传
- ionic 图片拍照;选择上传 ngcordova cordovaFileTransfer cordovaCamera
- ionic 的项目实现从手机相册选取图片或拍照并上传至服务器
- ionic 图片上传Demo
- ionic中实现从相册中选择图片并一次上传多张图片
- ionic 拍照选择本地图片
- ionic 多图片上传方案
- 拍照上传图片与从相册中选择图片上传
- Android项目框架之图片加载框架的选择
- php小项目图片的上传与下载
- 改造Kindeditor之:自定义图片上传插件。 外加给图片增加水印效果的选择。
- ionic 项目中使用ngCordova插件$cordovaCamera筛选手机图库图片显示出来并上传
- ionic学习之建立一个ionic项目
- 关于图片上传方案选择的依据
- android最新的选择图片及上传
- 宋丹丹那英现身澳门赌场,你还等什么
- C++ 多线程调试方法
- 黑马程序员-------java面向对象部分
- VS 2012 C# 5.0 规范:迭代器
- UVA12096 The SetStack Computer(栈的应用)
- ionic项目之图片的选择与上传
- 好记性不如烂笔头14-使用log4jdbc显示完整SQL语句和执行时间
- 十天学Linux内核之第一天---内核探索工具类
- 笔记:浅谈java虚拟机(三)
- Linux学习之CentOS(二十五)--Linux磁盘管理:LVM逻辑卷基本概念及LVM的工作原理
- 关于COM服务之加载顺序,此时你可能出现程序卡死,假死等现象,因为com服务可能加载了一半,导致其他需要com的服务假死
- Win7系统下利用U盘安装Ubuntu_12.04实现双系统教程
- 在Windows下GitHub的使用
- c/c++关于内存四区的模型。