2

Estou desenvolvendo um aplicativo que consiste de um mapa e uma câmera. No momento, quero adicionar a possibilidade do usuário tirar uma foto com a câmera e marcar no mapa onde essa foto foi tirada, mas estou com dificuldades em armazenar a foto no objeto que guarda as informações dos locais salvos no mapa. Vou colocar uns trechos de código que considero chave:

trecho de 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>

trecho de app.js : função selectPhoto():

    $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);
    });
  }

trecho de 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
    };

Na função selectPhoto(), após selecionar a foto do álbum, a source da variável 'image' tá sendo mudada e no html aparece a imagem selecionada. No entanto, eu não consigo salvar a mesma imagem em newLocation.photo, que fica undefined mesmo depois de selecionar a foto. Creio que o erro esteja em

$scope.newLocation.photo = new Image();
$scope.newLocation.photo.src = imageURI;

do app.js

Creio que não seja algo mto complexo de se resolver e que eu provavelmente estou fazendo alguma bobagem simples, já q sou iniciante em JS, html, etc. Mas realmente espero uma ajuda. Obrigado

2
  • não entendi muito bem o que vc fez, mas adicionar uma imagem parte do seguinte principio: var img = new Image(); e depois img.src = "suaimagem.jpeg"; de qualquer forma tente alterar imageURI; para image e veja o que acontece Commented 30/06/2015 às 23:02
  • porque não dispensar a variável image e trabalhar direto em $scope.newLocation.photo ? Commented 2/12/2015 às 19:34

1 Resposta 1

0

A função Camera.getPicture() retorna um base64 de uma fotografia tirada.

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

Basicamente é uma string gigante e que pode ser salva e posteriormente você exibir em um Html ou enviar para um webservice, por exemplo. Para as ferramentas que você está trabalhando eu sugiro que trabalhe com o base64 e o salve, quando for recuperar string do base64 você pode exibir no Html desta maneira.

<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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .