2
I’m developing an app that consists of a map and a camera. At the moment, I want to add the possibility of the user taking a photo with the camera and marking on the map where this photo was taken, but I’m having difficulty storing the photo in the object that stores the information of the locations saved on the map. I’m gonna put up some code snippets that I consider key:
chunk of addLocation.html:
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" ng-model="newLocation.name" placeholder="What's Here?" ng-minlength="1" ng-maxlength="100" required>
</label>
<label class="item item-input">
<span class="input-label">Picture</span>
<button class="button icon-left ion-image button-calm" ng-click="selectPhoto()">Select an image</button>
</label>
<div>
<img id="photo" height="256" width="256">
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
LAT : {{newLocation.lat | truncate:15}}
</a>
<a class="tab-item" href="#">
LNG : {{newLocation.lng | truncate:15}}
</a>
app.js snippet : selectPhoto function():
$scope.selectPhoto = function() {
Camera.getPicture({
quality: 75,
destinationType: 1,
sourceType: 0,
correctOrientation: true
}).then(function(imageURI) {
var image = document.getElementById('photo');
image.src = imageURI;
image.style.margin = "0 auto";
image.style.display= "block";
$scope.newLocation.photo = new Image();
$scope.newLocation.photo.src = imageURI;
},function(err) {
console.err(err);
});
}
excerpt from mapController.js:
$scope.saveLocation = function() {
LocationsService.savedLocations.push($scope.newLocation);
$scope.modal.hide();
$scope.goTo(LocationsService.savedLocations.length - 1);
};
var location = LocationsService.savedLocations[locationKey];
$scope.map.markers[locationKey] = {
lat:location.lat,
lng:location.lng,
message: location.name + location.photo,
focus: true,
draggable: false
};
In the function selectPhoto(), after selecting the album photo, the source of the variable 'image' is being changed and in the html the selected image appears. However, I cannot save the same image in newLocation.photo, which gets Undefined even after selecting the photo. I believe the error lies in
$scope.newLocation.photo = new Image();
$scope.newLocation.photo.src = imageURI;
of the app.js
I believe that it is not something very complex to solve and that I am probably doing some simple nonsense, since I am a beginner in JS, html, etc. But I really hope for a help. Thank you
I didn’t quite understand what you did, but adding an image starts from the following principle:
var img = new Image();and thenimg.src = "suaimagem.jpeg";anyway try to changeimageURI;forimageand see what happens– Hebert Lima
why not dispense with the variable
imageand work direct in$scope.newLocation.photo?– Rodrigo Reis