How to store images in a Javascript object?

Asked

Viewed 1,724 times

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

javascript html angularjs apache-cordova ionic

  • I didn’t quite understand what you did, but adding an image starts from the following principle: var img = new Image(); and then img.src = "suaimagem.jpeg"; anyway try to change imageURI; for image and see what happens

  • why not dispense with the variable image and work direct in $scope.newLocation.photo ?

1 answer

0

The Camera.getPicture() function returns a Base64 from a photo taken.

https://cordova.apache.org/docs/en/1.6.0/cordova/camera/camera.getPicture.html

Basically it is a giant string and can be saved and later you display in an Html or send to a webservice, for example. For the tools you are working on I suggest you work with Base64 and save it, when you are retrieving string from Base64 you can view in Html this way.

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=">

https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html

Browser other questions tagged javascript html angularjs apache-cordova ionic

You are not signed in. Login or sign up in order to post.