Question

我必须在应用中拍几张照片，我用Ionic和Angular制作它。

我有3个按钮，每个按钮都需要拍照。这是HTML方面：

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="takeImage1" 
 height="40" width="40" style="margin-right: 7px;" ng-click="Take">

<img ng-src="{{srcImage2 || 'img/foto_defecto.png'}}" id="srcImage2" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage2">

<img ng-src="{{srcImage3 || 'img/foto_defecto.png'}}" id="srcImage3" 
height="40" width="40" style="margin-right: 7px;" ng-click="takeImage3">

没有问题我有内联css，这是一个测试。

这些是功能：其中3个，每个按钮一个。

    $scope.takeImage1 = function() {
      var options = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.PNG,
        targetWidth: 250,
        targetHeight: 250,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true
      };

      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.srcImage1 = "data:image/PNG;base64," + imageData;

      }, function(err) {
        // error
      });
    }

该功能的作用是：拍摄照片，保存并在srcImage1 / 2/3 /等下显示缩略图。

但是我想只有一个功能，并从每个按钮调用它。

为此，我将代码更改为：

电话：

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" 
height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

功能：

 $scope.hacerFoto = function(numero) {          
    var options = {
        quality: 100,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit: false,
        encodingType: Camera.EncodingType.PNG,
        targetWidth: 250,
        targetHeight: 250,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: true
    };
  var buscar = "srcImage".concat(numero);
  alert(buscar);
  $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.buscar = "data:image/PNG;base64," + imageData;
  }, function() {
        alert("error al hacer la foto");
  });   
}

然而，我打算使用一般功能的$scope.buscar不会更新缩略图。

alert(buscar);正好显示了我所期待的内容，但$scope.buscar无法更新图片。我不知道为什么它不起作用。

我找到了一个解决方案，这是下一个：

  $cordovaCamera.getPicture(options).then(function(imageData) {
        var image = document.getElementById('srcImage'+numero);
        image.src = "data:image/PNG;base64," + imageData;
  }, function() {
        alert("error al hacer la foto");
  });

使用JS获取ID并替换src。然而，来自@Vladimir Zdenek的答案在Angular中更加优雅 - 所以我将代码更改为了。我接受他的衣服是正确的。

Answer 1

您必须更改模板中图像的引用：

<img ng-src="{{srcImage1 || 'img/foto_defecto.png'}}" id="srcImage1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

到

<img ng-src="{{buscar1 || 'img/foto_defecto.png'}}" id="buscar1" height="40" width="40" style="margin-right: 7px;" ng-click="hacerFoto(1)">

然后在您的函数中，更改以下行

$scope.buscar = "data:image/PNG;base64," + imageData;

到这个

$scope['buscar' + numero] = "data:image/PNG;base64," + imageData;

另外，请务必同时更改模板中的其他图片。

Answer 2

尝试在每次函数调用时清除'imageData'的值。

var imageData =“”;

函数中的$ scope变量

2 个答案: