I am using AngularJS + ionic and I am trying to create a google map. I am using the plugin cordova to get the exact position of the user and it works. In addition, the map is loaded only when the person takes a photo, there, is where obtendo such data. So there I have no problem, but the way the map is loaded strange, is clipped and navigation is pesima. I leave you my code and a picture of how the map looks.
<map center="{{latitud}}, {{longitud}}" zoom="15" style="width:100%;height:100%;" data-tap-disabled="true" id="mapa_view">
<marker position="{{latitud}}, {{longitud}}" />
</map>
.controller("CamaraCtrl", function($scope,$rootScope, Camera,$cordovaGeolocation) {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var latitud_actual = position.coords.latitude
var longitud_actual = position.coords.longitude
$scope.latitud = latitud_actual;
$scope.longitud = longitud_actual;
}, function(err) {
// error
});
$scope.mostrar_form = false;
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.lastPhoto = imageURI;
$scope.mostrar_form = true;
}, function(err) {
console.err(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: false
});
};
$scope.getPhoto();
})
Related
I am working on an Ionic App that is communicating with a rails API. I have users, and user have pictures. I have been able to follow this guide about how to allow users to grab images natively from their phone images.
this allows the user to grab an image from their phone
$ionicPlatform.ready(function() {
$scope.getImageSaveContact = function() {
// Image picker will load images according to these settings
var options = {
maximumImagesCount: 1,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options).then(function (results) {
// Loop through acquired images
for (var i = 0; i < results.length; i++) {
$scope.collection.selectedImage = results[i]; // We loading only one image so we can use it like this
window.plugins.Base64.encodeFile($scope.collection.selectedImage, function(base64){ // Encode URI to Base64 needed for contacts plugin
$scope.collection.selectedImage = base64;
});
}
console.log("results");
console.log(results);
}, function(error) {
console.log('Error: ' + JSON.stringify(error));
});
};
});
The problem is, it is not running (or appears not to not be running) the window.plugins.Base64.encodeFile line that encodes a file. Right now, it is only the image file and not the Base64 encoded string.
How do I get this function to run, after I have grabbed a file from my device camera?
i was able to figure it out, answer is below
from an old project https://github.com/aaronksaunders/firebaseStorageApp/blob/master/www/js/app.js#L132
return $cordovaFile.readAsArrayBuffer(path, fileName)
.then(function (success) {
// success - get blob data
var imageBlob = new Blob([success], { type: "image/jpeg" });
})
add this camera plugin
cordova plugin add cordova-plugin-camera
this returns image in base 64 by default..
$scope.choosePhoto = function () {
$scope.myPopup.close();
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
}, function (err) {
// An error occured. Show a message to the user
});
}
more details can be found here
http://ngcordova.com/docs/plugins/camera/
hope this helps...
I was able to figure this out by piecing together a bunch of stuff, especially w/ the rails side. The idea is to click a button to get an image, pick one from your camera roll, convert that image to a base64 string, then send that image to the server.
my current stack is rails 4, ionic/angular v1. hopefully this helps someone else.
angular controller
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
$scope.grabImage = function () {
var options = {
maximumImagesCount: 1,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options).then(function (results) {
$scope.dataImg = results;
return toDataUrl($scope.dataImg, function(base64Img) {
$scope.base64 = base64Img;
$state.go($state.current, {}, {reload: false});
})
}, function(error) {
$scope.message = "Error: Failed to Attach Image";
var alertPopup = $ionicPopup.alert({
title: 'User Photos',
templateUrl: 'templates/modals/success_or_error.html',
scope: $scope
});
});
}
rails controller
def create
image = Paperclip.io_adapters.for(params[:image_file])
image.class.class_eval { attr_accessor :original_filename, :content_type }
image.original_filename = "mu_#{#current_mobile_user.id}_#{#current_mobile_user.pictures.count}.jpg"
image.content_type = "image/jpeg"
#picture = #current_mobile_user.pictures.create(image: image, imageable_id: #current_mobile_user.id)
if #picture.save
render json: ['Picture Uploaded!'], status: :created
else
render json: [#picture.errors.full_messages.to_sentence], status: :unprocessable_entity
end
end
i take my picture with a camera after i want to post in the web service
so how to convert this image to format Json
my controller changed:
facebookExample.controller('MainCtrl', function($scope,$cordovaOauth, $localStorage, $location,$ionicPopup,$state,$http, Camera) {
$scope.fileArray = [];
$scope.imgContent = {};
$scope.imageStrings = [];
$scope.getPhoto = function(files) {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.lastPhoto = imageURI;
angular.forEach(files, function(flowFile, i) {
var uri = imageURI;
$scope.imageStrings[i] = uri;
$scope.imgContent = {
fileName: flowFile.name,
fileContent: uri
};
fileReader.readAsDataURL(flowFile.file);
$scope.fileArray.push($scope.imgContent);
});
}, function(err) {
console.err(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: false
});
console.log("JSON.stringify($scope.fileArray)");
console.log(JSON.stringify($scope.fileArray));
};
You can try this code.
$scope.fileArray = [];
$scope.imgContent = {};
$scope.imageStrings = [];
$scope.processFiles = function(files) {
angular.forEach(files, function(flowFile, i) {
var fileReader = new FileReader();
fileReader.onload = function(event) {
var uri = event.target.result;
$scope.imageStrings[i] = uri;
$scope.imgContent = {
fileName: flowFile.name,
fileContent: uri
};
};
fileReader.readAsDataURL(flowFile.file);
$scope.fileArray.push($scope.imgContent);
});
console.log(JSON.stringify($scope.fileArray));
};
Or here is the jsfiddle
I tried this way and worked in one of my projects.Check it out.
Maybe it works for you too!
$cordovaCamera.getPicture(options).then(function(imagePath)
{
var promise = $service(imagePath);
promise.success(function(data)
{
//after service
});
}, function(error)
{
//An error occured
});
}
And here is an example service
$service=function(photo)
{
$http.defaults.headers.common["Accept"] = "application/json";
$http.defaults.headers.post["Content-Type"] = "application/json";
var data=JSON.stringify({photo:photo});
return $http.post("your webservice url",data);
};
Edit 1:Forgot to give you the camera options.Here you are!
var options = {
quality: 100,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
cameraDirection: Camera.Direction.FRONT,
correctOrientation: true,
saveToPhotoAlbum: true
};
How do I access with Ionic/angularjs on the image gallery? I just want to open the image gallery per button click. How is that possible?
You can use the cordova camera plugin
cordova plugin add org.apache.cordova.camera
Plugin Reference:
https://github.com/apache/cordova-plugin-camera
Sample code
$scope.getPhoto = function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.ALLMEDIA,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
console.log("img URI= " + imageData);
//Here you will be getting image data
}, function(err) {
alert("Failed because: " + err);
console.log('Failed because: ' + err);
});
};
You need to just set sourceType option to Camera.PictureSourceType.SAVEDPHOTOALBUM
You can get cordova plugin for ImagePicker by using the following link:
http://ngcordova.com/docs/plugins/imagePicker/
Example:
$scope.OpenGallery = function() {
var options = {
maximumImagesCount: 1,
width: 350,
height: 500,
quality: 50
};
$cordovaImagePicker.getPictures(options).then(function (results) {
console.log(results);
},function(error) {
console.log(error);
});
}
Guys at Ionic made this example: https://github.com/driftyco/ionic-example-cordova-camera/blob/master/plugins/org.apache.cordova.camera/doc/index.md
As a second option, you can try with the imagePicker plugin.
Example:
module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {
var options = {
maximumImagesCount: 10,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, function(error) {
// error getting photos
});
});
I'm building an Ionic/Cordova app which uses Parse.com as a BaaS. It uses the ngCordova Camera plugin to control the device camera. The use-case is click a button, take a picture and have it upload to Parse. I've been researching the problem for a week now and still can't figure out why I can't get it to work.
The controller:
.controller('cameraCtrl', function($scope, camera) {
var cameraOptions = {
quality: 75,
destinationType: 0,
encodingType: 0,
targetWidth: 300,
targetHeight: 300,
mediaType: 0,
correctOrientation: true,
saveToPhotoAlbum: true
};
};
$scope.takePicture = function() {
cameraOptions.sourceType = 1;
navigator.camera.getPicture(onSuccess, onFail, cameraOptions);
}
$scope.selectPicture = function() {
cameraOptions.sourceType = 0;
navigator.camera.getPicture(onSuccess, onFail, cameraOptions);
}
function onSuccess(picture) {
File.upload(picture)
.success(function(data) {
// upload finish
});
$scope.$apply(function() {
$scope.preview = 'data:image/jpeg;base64,' + picture;
});
}
function onFail(resp) {
alert('Error: ' + resp);
}
});
The service:
angular.factory('File', function ($http) {
return {
upload: function (photo) {
var json = {
'base64': photo,
'_ContentType': 'image/jpeg'
}
var config = {
method: 'POST',
url: 'https://api.parse.com/1/files/pict.jpg',
data: json,
headers: {
'X-Parse-Application-Id': 'PCm0kDVeThvRcdFuS9lITrmskEhqjbqwFAydL2Lr',
'X-Parse-REST-API-Key': 'FhasGkTl0BLpJuLLJvPB2NFwlccXzVbirktdngXN'
}
};
return $http(config);
}
}
});
The HTML:
<button class="button" ng-click="takePicture()">
Any ideas as to why this doesn't work? Is there a better or more simple way to accomplish this? Any examples of this working somewhere? I've tried a dozen different solutions over the week and haven't found anything that works for my use-case. Thanks!
It would be helpful is you provided any error messages, but here is how I have solved the issue
var imageFile = new Parse.File("mypic.jpg", {base64: _params.photo});
console.log(imageFile);
// save the parse file
return imageFile.save().then(function () {
// 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) {
console.log("Error");
console.log(error);
});
There is a complete project here showing Parse.com integration with the File Object.
https://github.com/aaronksaunders/dcww/blob/master/www/js/services.js
So Ive been trying to get leaflet working in an Ionic app and everything is working fine except my markers. They are not being shown in the default screen nor the locate() function. below is my code
html snippet
<leaflet defaults="map.defaults" center="map.center" markers="map.markers" ng-if="map"></leaflet>
controller
app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {
$scope.$on("$stateChangeSuccess", function() {
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'},
center: {
lat : 20.6219444444,
lng : -105.228333333,
zoom : 15},
markers: {
lat : 20.6219444444,
lng : -105.228333333,
message: "Puerto Vallarta, MX",
focus: true,
draggable: false}
};
});
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 16;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
});
any ideas?? thanks for looking
SOLVED
I added marker value to a variable and then copied that into the $scope.map
here is the updated working controller
app.controller('MapController',function($scope, $cordovaGeolocation, $stateParams) {
$scope.$on("$stateChangeSuccess", function() {
var mainMarker = {
lat: 20.6219444444,
lng: -105.228333333,
focus: true,
message: "Puerto Vallarta, MX",
draggable: false};
$scope.map = {
defaults: {
tileLayer: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
maxZoom: 18,
zoomControlPosition: 'bottomleft'},
center: {
lat : 20.6219444444,
lng : -105.228333333,
zoom : 15},
markers: {
mainMarker: angular.copy(mainMarker)}
};
});
$scope.locate = function(){
$cordovaGeolocation
.getCurrentPosition()
.then(function (position) {
$scope.map.center.lat = position.coords.latitude;
$scope.map.center.lng = position.coords.longitude;
$scope.map.center.zoom = 16;
$scope.map.markers.now = {
lat:position.coords.latitude,
lng:position.coords.longitude,
message: "You Are Here",
focus: true,
draggable: false
};
}, function(err) {
// error
console.log("Location error!");
console.log(err);
});
};
});