Showing posts with label Ionic Framework web services loop $http json request. Show all posts
Showing posts with label Ionic Framework web services loop $http json request. Show all posts

Ionic Framework - Camera Image Uploads and Base64 Strings

Ionic Framework - Camera Image Uploads and Base64 Strings


Hi Today Discussed Ionic Framework - Camera Image Uploads and Base64 Strings menas Ionic Framework Build Mobile Application Framework. Previously more discussed Ionic Framework Today Camera Take Picture image uploads and Base64 strings. This Task discussed  more details followed. 

Ionic Framework - Camera Image Uploads and Base64 Strings
Ionic Framework - Camera Image Uploads and Base64 Strings

First Install Image Resizer Plugin

cordova plugin add https://github.com/timkalinowski/PhoneGap-Image-Resizer

Install the Actionsheet Plugin

cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet

Install the Camera Plugin

cordova plugin add cordova-plugin-camera

The Code

We are using the camera plugin here, but I did not use Ionic Framework with ngCordova – Camera here for the sake of simplicity, I suspect you will get the same behavior if you are using the ngCordova – Camera module to access the camera.

getPicture: function (options) {
    var q = $q.defer();
 
    navigator.camera.getPicture(function (result) {
        // Do any magic you need
        q.resolve(result);
    }, function (err) {
        q.reject(err);
    }, options);
 
    return q.promise;
},resizeImage: function (img_path) {
    var q = $q.defer();
    window.imageResizer.resizeImage(function (success_resp) {
        console.log('success, img re-size: ' + JSON.stringify(success_resp));
        q.resolve(success_resp);
    }, function (fail_resp) {
        console.log('fail, img re-size: ' + JSON.stringify(fail_resp));
        q.reject(fail_resp);
    }, img_path, 200, 0, {
        imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
        resizeType: ImageResizer.RESIZE_TYPE_MIN_PIXEL,
        pixelDensity: true,
        storeImage: false,
        photoAlbum: false,
        format: 'jpg'
    });
 
    return q.promise;
},
toBase64Image: function (img_path) {
    var q = $q.defer();
    window.imageResizer.resizeImage(function (success_resp) {
        console.log('success, img toBase64Image: ' + JSON.stringify(success_resp));
        q.resolve(success_resp);
    }, function (fail_resp) {
        console.log('fail, img toBase64Image: ' + JSON.stringify(fail_resp));
        q.reject(fail_resp);
    }, img_path, 1, 1, {
        imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
        resizeType: ImageResizer.RESIZE_TYPE_FACTOR,
        format: 'jpg'
    });
 
    return q.promise;
}

Supporting File Uploads To Parse

/********************************************************
 *                                                      *
 * @param _params.photo base64 representation of photo  *
 * @param _params.caption string to go with photo       *
 ********************************************************/ 
savePhotoToParse: function (_params) {
    var ImageObject = Parse.Object.extend("ImageInfo");
 
    // create the parse file object using base64 representation of photo
    var imageFile = new Parse.File("mypic.jpg", {base64: _params.photo});
 
 
    // save the parse file object
    return imageFile.save().then(function () {
 
        _params.photo = null;
 
        // create object to hold caption and file reference
        var imageObject = new ImageObject();
 
        // set object properties
        imageObject.set("caption", _params.caption);
        imageObject.set("picture", imageFile);
 
        // save object to parse backend
        return imageObject.save();
 
    }, function (error) {
        alert("Error " + JSON.stringify(error, null, 2));
        console.log(error);
    });
 
}

Ionic Framework web services loop $http json request

Ionic Framework web services loop $http json request

Ionic Framework web services loop $http json request
Web Services Loop $http json request

Today Discussed Ionic Framework web Services data looping Concepts.  Angularjs Previously discussed angularjs looping concepts same based ionic framework used. Angularjs and Ionic Framework is same concepts. Here follows this sample code in ionic framework and more information and example click here

controller('DataCtrl', function($scope, $http, data) {
  $scope.name = 'World';
  $scope.allads = [];
  $scope.data= [];

  $http.get('http://www.mysite.com/list.json').success(function(data) {
    $scope.allads = data;
    $scope.loadMore();
  });

  var counter = 0;

  $scope.loadMore = function() {
    var data = [];
    var l = $scope.data.length;
    var m = Math.min(l+10, $scope.allads.length);
    for ( var i = l; i < m; i++) {
      data.push($scope.allads[i]);
    }

    console.log('Loading more!', m);
    $scope.ads = $scope.ads.concat(data);
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

  $scope.$on('stateChangeSuccess', function() {
    $scope.loadMore();
  });

  // THIS METHOD LOADS 4 LOCAL TEST ITEMS WITH THE ADSSERVICE
  //$scope.ads = ads;
})
and
.service('AdsService', function($q) {

  return {
    ads : [
        { shortrelativetime:'30 min ago', title: 'TST อาหารเสริมเพี่มความสูง', group:'Vehicles', category:'Cars', province:'Vientiane Capital', district:'Xaythany', price:'24000', currency:'USD', photo:'20140202-040753-c1395444fd.jpg', id: 1 },
        { shortrelativetime:'1 day ago', title: 'TST Samsung Galaxy Grand', group:'High Tech', category:'Phones', province:'Vientiane Capital', district:'Xaythany', price:'6000', currency:'THB', photo:'20140218-101800-1602504d17.jpg', id: 5 },
        { shortrelativetime:'1 day ago', title: 'TST ຂາຍດິນປຸກສ້າງ', group:'Real Estate', category:'Land or House', province:'Vientiane Capital', district:'Xaythany', price:'850000', currency:'THB', photo:'20140715-080420-4a0ba40b89.jpg', id: 6 },
        { shortrelativetime:'08 Jun 2014', title: 'TST HTC One', group:'High Tech', category:'Phones', province:'Vientiane Capital', district:'Xaythany', price:'12000', currency:'THB', photo:'20140604-083644-046276fe30.jpg', id: 9 }
    ],
    getAds: function() {
        return this.data
    },
    getAd: function(adId) {
        var dfd = $q.defer()
        this.ads.forEach(function(ad) {
            if (ad.id === adId) dfd.resolve(ad)
        })

        return dfd.promise
    }

  }
})