ngCordova相機在模擬器上工作，但不在設備上

我正在爲我的課程構建一個帶Ionic的應用程序結論（我真的很匆忙，因爲我只剩下2個星期），而且我堅持使用ngCordova Camera Plugin問題。在仿真器上測試時，相機可以正常工作，在我的設備上不會出現圖像。它不顯示破解的圖像圖標，只是一個空白的方塊。在模擬器上，我嘗試使用3個不同的Android API版本：17,19和22（它可以在所有3個版本上運行），但是在具有API 22的設備上它不起作用。ngCordova相機在模擬器上工作，但不在設備上

我使用Genymotion仿真器和>離子運行的Android，這裏是我所得到的： Emulator: Xperia Z - android 4.2.2 API 17

但是當我嘗試>離子構建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
取出'數據：圖像/ JPEG; BASE64，' 從< IMG>標籤並使用它在功能上與的imageData

有人可以幫我嗎？

編輯：

使用鉻檢查它顯示了試圖加載圖像時出現以下錯誤：

拒絕，因爲它違反了以下內容安全策略指令加載圖像：「default-src *」。請注意，'img-src'沒有明確設置，所以'default-src'被用作後備。 on ionic.bundle.js：16438

現在我已經添加了img-src'self'*;我在我的索引meta標籤，錯誤改爲：

拒絕，因爲它違反了以下內容安全策略指令來加載圖像：「IMG-SRC *」。

來源

2016-04-26 Gabriel Barreto

嘗試使用[Chrome檢查]（https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging）調試您的應用程序，並檢查控制檯中的錯誤。 – Phonolog

您是否正在運行相機插件的最新版本？ –

@Phonolog我按照你的說法做了，它給出了這個錯誤：_Refused加載圖像，因爲它違反了以下內容安全策略指令：「default-src *」。請注意，'img-src'沒有明確設置，因此'default-src'被用作**後退。** ionic.bundle.js ** –

請嘗試更改 img-src'self'*; 至 img-src'self'data :; 這應該允許通過數據方案加載資源（例如Base64編碼圖像）。

來源

2016-04-27 05:20:59

這解決了我的問題，我甚至卡住了Google Maps API圖像，現在它顯示了一切。謝謝 –

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界面IMG這個

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

，並在你的HTML添加

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

。你的模塊中

和改變這樣

angular.module('starter', ['ionic', 'ngCordova'])
根據您的需要
你可以根據這個ng-Cordova camera選擇DATA_URL或FILE_URI。

來源

2016-04-27 05:07:12

ngCordova相機在模擬器上工作，但不在設備上

回答

相關問題