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

由于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)

时间: 2024-12-21 09:49:22

ionic项目之图片的选择与上传的相关文章

适应各浏览器图片裁剪无刷新上传js插件(转)

看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

php图片处理之图片转为base64格式上传

我们在开发系统时,处理图片上传是不可避免的,使用thinkphp的肯定很熟悉 import("@.ORG.UploadFile"); 的上传方式. 今天我们来讲一个使用html5 base64上传图片的方法. 其实就是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离IE,珍惜生命. 先扔个demo出来给大伙体验体验哈. http://t.lanchenglv.com/lan/index.php/Base64/images

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题)

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题) http://pic.sdodo.com/tool/picadjust/ http://www.zhengzong.cn/bbsxp/thread-8136-1-1.html 一次使用windows xp用头像是用到 因头像尺寸标准为48*48 Look! 成功修改的小猫咪! Windows Xp / 2003用户头像位置 C:\Documents and Settings\All Users\Application Data\Micro

js实现图片预览以及上传

HTML 代码: <input  type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/>  <input  type="hidden" id="hidden_s&quo

项目总结——MVC+MongoDB实现文件上传

在做项目的时候我们遇到了视频上传的问题.正式开始项目之前做了一个简单的Demo实现在MVC中视频文件的上 传,考虑到将视频放到MongoDB中上传和读取速度慢的问题,这次我们实现的文件上传是存储的路径,读取的额时候 直接通过路径读取就OK了. MVC,M指Model,我目前把它理解成三层中的Entity层,进行数据的传递,当然里边也可以放一些业务逻辑的代 码.V,指View层,视图,用于显示界面,C指Controller,用于控制界面的显示.MongoDB是现在非常流行的NoSQL数 据库,具体

在ASP.NET中实现图片、视频文件上传方式

一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 protected void btnSubmit_Click(object sender,EventArgs e) { string strImgPath=string.Empty; string strDateTime=dateTime.Now.Tostring("yyyyMMddhhmmss&qu

【Android实战】----基于Retrofit实现多图片/文件、图文上传

一.再次膜拜下Retrofit Retrofit无论从性能还是使用方便性上都很屌!!!,本文不去介绍其运作原理(虽然很想搞明白),后面会出专题文章解析Retrofit的内部原理:本文只是从使用上解析Retrofit实现多图片/文件.图文上传的功能. 二.概念介绍 1)注解@Multipart 从字面上理解就是与多媒体文件相关的,没错,图片.文件等的上传都要用到该注解,其中每个部分需要使用@Part来注解..看其注释 /** * Denotes that the request body is m

处理带说明信息的图片与处理文件上传 四(62)

一 .处理带说明信息的图片与处理文件上传  void delete()           删除保存在临时目录中的文件.     String getContentType()  获取文档的类型           Returns the content type passed by the browser or null if not defined. String getFieldName() 获取字段的名称,即name=xxxx           Returns the name of

小程序base64图片解析成流上传服务器

/** * * @Title: decodeBase64ToImage * @Description: (將base64位的图片解码成流 上传到阿里云服务器) * @param base64 图片的64进制码 * @param path 图片的本地生成地址 * @param imgName 图片名称 * @param uppath 图片的oss远程地址 * @param imgName void (这里描述输出参数的作用) * @throws * @author huyuhang * @date