ngCordova 相机适用于模拟器但不适用于设备

Question

我正在用 Ionic 为我的课程结论构建一个应用程序（我真的很赶时间，因为我只剩下 2 周了）并且我遇到了 ngCordova 相机插件问题。在模拟器上测试时，相机工作正常，在我的设备上没有图像出现。它也没有显示破裂的图像图标，只是一个空白方块。在模拟器上，我尝试使用 3 个不同的 Android API 版本：17、19 和 22（并且它适用于所有 3 个），但在我的设备上 API 22 它不没用。

我正在使用 Genymotion 模拟器和 > ionic 运行 android，这是我得到的： Emulator: Xperia Z - android 4.2.2 API 17

但是当我尝试 > ionic build android 并将其安装到我的设备上时，这就是我得到的：

Device: Xperia Z2 - Android 5.1 API 22

所有页面上的所有图像都是这样，如果我拍摄图片或从库中获取图片。这是我的代码（来自图片的来源）：

form.html（模态）：

<div class="list">
    <label class="item item-input item-floating-label">
      <span class="input-label">Nome</span>
      <input type="text" placeholder="Nome" ng-model="nomeperfil">
    </label>
    <label class="item item-input item-floating-label">
      <span class="input-label">Sobrenome</span>
      <input type="text" placeholder="Sobrenome" ng-model="snperfil">
    </label>
    <button class="button button-block button-royal" ng-click="escolhefotoperfil()">Escolha uma foto para o perfil!</button>
    <img id="fotoperfil" class="picture" ng-model="fotoperfil" ng-show="fotoperfil !== undefined" ng-src="{{'data:image/jpeg;base64,'+fotoperfil}}"></img>
    <br /><br />
    <button class="button button-block button-calm" ng-click="salvarUsuario(nomeperfil, snperfil, fotoperfil)">Salvar</button>
  </div>

我的页面控制器启动了模态（只是相机部分，如果需要我会添加更多代码）：

.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $cordovaNetwork, $localStorage, $ionicPopup, $cordovaCamera, $state, $ionicPlatform, client) {
   $scope.escolhefotoperfil = function(){
   var options = {
     quality: 50,
     destinationType: 0,
     sourceType: 0,
     allowEdit: true,
     encodingType: 1,
     targetWidth: 300,
     targetHeight: 300,
     popoverOptions: CameraPopoverOptions,
     saveToPhotoAlbum: false
   };

   $cordovaCamera.getPicture(options).then(function (imageData) {
      $scope.fotoperfil = imageData;
   }, function (err) {
     $scope.errofoto = "Erro ao escolher foto: " + err.message;
   });
 };
});

我试过：

重新安装插件
重新安装平台
将DATA_URL改为FILE_URI
从标签中取出'data:image/jpeg;base64,'，并用在[=42=的函数上]imageData

有人能帮帮我吗？

编辑：

使用 Chrome Inspect 它在尝试加载图像时显示以下错误：

拒绝加载图像，因为它违反了以下内容安全策略指令："default-src *"。请注意，'img-src' 未明确设置，因此 'default-src' 用作后备。 on ionic.bundle.js:16438

现在我已经将 img-src 'self' *; 添加到我索引上的元标记中，错误更改为：

拒绝加载图像，因为它违反了以下内容安全策略指令："img-src *".

Answer 1

1) 在你的情况下，我看到的错误是在这一行

$scope.fotoperfil = imageData; 在 imageData 中你只有 base64 字符串所以你不能在 UI

中竞争

应该是这样 $scope.fotoperfil = "data:image/jpeg;base64," + imageData;这里 data:image/jpeg;base64 这会将您的 base64 字符串转换为 .jpeg 图像。

2) 你应该在你的 img 标签中有一个占位符来查看拍摄的照片。

3) 调用相机的简单方法，请在此处关注 Nic Raboy blog。

将你的 html UI img 标签改成这个

<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">

并添加

<script src="js/ng-cordova.min.js"></script>

在你的 html.

并像这样更改您的模块

angular.module('starter', ['ionic', 'ngCordova'])

根据你的需要你可以根据这个DATA_URL或者FILE_URIng-Cordova camera.

Answer 2

请尝试更改 img-src 'self' *; 到 img-src 'self' 数据：；这应该允许通过数据方案加载资源（例如 Base64 编码图像）。

ngCordova 相机适用于模拟器但不适用于设备

ngCordova camera works on emulator but not on device

camera

android

angularjs

cordova

ionic-framework