Question

我想要捕获图像，捕获后应将其上传到服务器，并希望从服务器获取相同内容，并希望将其显示在一个位置，即$scope.pictureUrl="http://placehold.it/100x100"。同样，我想从中选择图像画廊，并希望上传到服务器，但我的代码不起作用以下是我的代码。我已经在stackoverflow上提到了很多关于这个的问题，但是徒劳无功。它提供成功警报，但当我看到我的服务器时，它不会显示任何上传的图像。请告诉我更改。

  $scope.pictureUrl = "http://placehold.it/100x100";
    $scope.pictureUrl2="http://placehold.it/100x100";

  $scope.takePicture = function () {
      var options = {
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.CAMERA,
          encodingType: Camera.EncodingType.JPEG
      };
      $cordovaCamera.getPicture(options).then(function (imageData) {
          //console.log('camera data: ' + angular.toJSON(imageData));
          $scope.imgdata = imageData;
          $scope.pictureUrl = 'data:image/jpeg;base64,' + imageData;
         // var image = document.getElementById('myImage');
          var url = '';
          var fd = new FormData();

          //previously I had this
          //angular.forEach($scope.files, function(file){
          //fd.append('image',file)
          //});

          fd.append('image', $scope.imgdata);

          $http.post(url, fd, {

                  transformRequest: angular.identity,
                  headers: {
                      'Content-Type': undefined
                  }
              })
              .success(function (data, status, headers) {
                  $scope.pictureUrl2 = data.resource_uri; //set it to the response we get
                alert("Success");
              })
              .error(function (data, status, headers) {

              })

      });
  }

  $scope.takePhoto = function () {
    var options = {
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
      encodingType: Camera.EncodingType.JPEG
    };
    $cordovaCamera.getPicture(options).then(function (imageData) {
      $scope.imgdata=imageData;
      $scope.pictureUrl = 'data:image/jpeg;base64,' + imageData;
        //$scope.blobImg = dataURItoBlob($scope.pictureUrl);
      window.alert("Picture Captured .. !!");
    }, function (err) {
      window.alert('Error:' + err.message);
    });
  };

插件已正确安装。相机和图库正在启动但无法上传：（

Answer 1

实际上您正在使用目的地类型

destinationType: Camera.DestinationType.DATA_URL,

因此， imageData 仅包含base64值，因此您可以将该值分配给对象，并且可以用于post方法。

当您尝试从服务器

获取base64的数据时

'data:image/jpeg;base64,' + imageData;（注意此处imageData是包含base64字符串的变量）

通过这种方式，我们可以显示来自服务器的图像

在服务器上捕获和上传图像，从服务器获取不在角度js和离子中工作

1 个答案: