ionic 图片拍照;选择上传 ngcordova cordovaFileTransfer cordovaCamera

http://ngcordova.com/docs/plugins/touchID/ 这里面可都是硬货;
添加ngcordova插件;http://ngcordova.com/docs/install/(初始化网址);
至于不理解这句的bower install ngCordova;自己去初始化(http://bower.io/#install-bower);网址打不开的,自己翻墙;哥再教你个方法,下个百度浏览器,各种外文技术网站都可以打开的*(什么ionic等,速度很快的,百度这点做的很好,不要告诉别人呀,这是哥的经验);
下面是代码部分;具体的很;谁要是看不懂别理我了,我想静静: 控制器代码:

$scope.picture = function() {
        $ionicActionSheet.show({
            buttons: [
              { text: '相机' },
              { text: '图库' }
            ],
            cancelText: '关闭',
            cancel: function() {
                return true;
            },
            buttonClicked: function(index) {
                switch (index){
                    case 0:
                        takePhoto();
                        break;
                    case 1:
                        pickImage();
                        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]);
                upImage(results[0]);
            }, function (error) {
                // error getting photos
            });
    }
     var takePhoto = function () {
            var options = {
                //这些参数可能要配合着使用,比如选择了sourcetype是0,destinationtype要相应的设置
                quality: 100,                                            //相片质量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: false,                                        //在选择之前允许修改截图
                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,
                saveToPhotoAlbum: true                                   //保存进手机相册
            };
            $cordovaCamera.getPicture(options).then(function (imageData) {

                CommonJs.AlertPopup(imageData);
                var image = document.getElementById('myImage');
                image.src = imageData;
                upImage(imageData);
                //image.src = "data:image/jpeg;base64," + imageData;
            }, function (err) {
                // error
                CommonJs.AlertPopup(err.message);
            });

        }

      //图片上传upImage(图片路径)
            //http://ngcordova.com/docs/plugins/fileTransfer/  资料地址
            var upImage = function (imageUrl) {
                document.addEventListener('deviceready', function () {
                    var url = "http://192.168.1.248/api/UserInfo/PostUserHead";
                    var options = {};
                    $cordovaFileTransfer.upload(url, imageUrl, options)
                      .then(function (result) {
                          alert(JSON.stringify(result.response));
                          alert("success");
                          alert(result.message);
                      }, function (err) {
                          alert(JSON.stringify(err));
                          alert(err.message);
                          alert("fail");
                      }, function (progress) {
                          // constant progress updates
                      });

                }, false);

视图类代码:

<ion-view view-title="Dashboard">
  <ion-content class="padding">

<button data-ng-click="pay()">支付</button>
<button data-ng-click="picture()">拍照</button>
<div class="list">
      <div class="item" data-ng-repeat="img in images_list">
       <img src="{{img}}"  style="width:100%">
      </div>
    </div> 
  </ion-content>
</ion-view>

对于控制器里面的图片上传;
var url = “http://192.168.1.248/api/UserInfo/PostUserHead“;
var options = {};
$cordovaFileTransfer.upload(url, imageUrl, options)
url :上传路径 imageUrl 图片路径 这一点自己看着整吧

最近一直在做混合式开发,各种各样的坑,摸着石头过河,其他方面的问题。也可以留言,我们一块解决,你的问题或许我早就遇到过,什么支付了,resource post 了,post 格式不正确了,哎呀,那叫一个坑挨着一个坑,
偷得半日清闲写这个,希望在代码的路上让我们一路看到希望的曙光;忘记重点了:
源码下载之后;
找到文件所在目录:
执行 ionic platform add android 添加平台
ionic build android 生成apk
你的电脑无法执行,那就是你的配置环境问题了,自己看着整吧;
源码地址:http://download.csdn.net/detail/u012922981/9465765

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值