2016-04-26 148 views
0

我正在为我的课程构建一个带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_URLFILE_URI
  • 取出'数据:图像/ JPEG; BASE64,' 从< IMG>标签并使用它在功能上与的imageData

有人可以帮我吗?

编辑:

使用铬检查它显示了试图加载图像时出现以下错误:

拒绝,因为它违反了以下内容安全策略指令加载图像: “default-src *”。请注意,'img-src'没有明确设置,所以'default-src'被用作后备。 on ionic.bundle.js:16438

现在我已经添加了img-src'self'*;我在我的索引meta标签,错误改为:

拒绝,因为它违反了以下内容安全策略指令来加载图像:“IMG-SRC *”。

+1

尝试使用[Chrome检查](https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging)调试您的应用程序,并检查控制台中的错误。 – Phonolog

+0

您是否正在运行相机插件的最新版本? –

+0

@Phonolog我按照你的说法做了,它给出了这个错误:_Refused加载图像,因为它违反了以下内容安全策略指令:“default-src *”。请注意,'img-src'没有明确设置,因此'default-src'被用作**后退。** ionic.bundle.js ** –

回答

0

请尝试更改 img-src'self'*; 至 img-src'self'data :; 这应该允许通过数据方案加载资源(例如Base64编码图像)。

+0

这解决了我的问题,我甚至卡住了Google Maps API图像,现在它显示了一切。谢谢 –

0

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_URLFILE_URI

相关问题