L'image d'ui-cropper ne charge pas

J'utilise la directive ui-cropper dans mon projet angulaire.L'image d'ui-cropper ne charge pas

Je souhaite rogner une image sélectionnée à partir d'une liste d'images mais pour une raison quelconque l'image sélectionnée n'apparaît pas dans la zone désignée mais la partie recadrée de cette image sélectionnée apparaît mais je ne peux pas modifier la zone de rognage .

Voici une jsFiddle montrant la question: click here

HTML:

<body ng-controller="Ctrl"> 
    <div>Select an image: <!-- <input type="file" id="fileInput" /> --></div> 
    <div class="croparea"> 
    <ui-cropper image="imageToCrop" result-image="myCroppedImage" area-type="rectangle"></ui-cropper> 
    </div> 
    <button ng-click="selectImageToCrop()">Select to crop</button> 
    <button ng-click="cropIt()">crop it!</button> 
    <div class="image-container"> 
    <div class="image" ng-repeat="item in images"> 
     <input type="radio" ng-value="item" ng-model="gallery_image.selected" id="{{$index+1}}" ng-change="clearSelect()"/> 
     <label for="{{$index+1}}"> 
     <img ng-src="{{item.url}}"> 
     </label> 
    </div> 
    </div> 
    <div class="cropped">Cropped Image: 
    <div><img ng-src="{{myCroppedImage}}" /></div> 
    </div> 
</body>

JS:

angular.module('app', ['uiCropper']) 
    .controller('Ctrl', function($scope) { 
    $scope.myImage=''; 
    $scope.myCroppedImage=''; 

    $scope.images = [ 
     {id:1, url: "https://unsplash.it/200/300/?random=1"}, 
     {id:2, url: "https://unsplash.it/200/300/?random=2"}, 
     {id:3, url: "https://unsplash.it/200/300/?random=3"}, 
     {id:4, url: "https://unsplash.it/200/300/?random=4"} 
    ] 
    $scope.gallery_image={}; 
    $scope.gallery_image.selected = {}; 

    $scope.selectImageToCrop = function(){ 
     $scope.imageToCrop = $scope.gallery_image.selected.url; 
    }; 
    $scope.clearSelect = function(){ 
     $scope.imageToCrop = ''; 
    }; 
    $scope.cropIt = function(){ 
     $scope.imageToCrop = $scope.myCroppedImage; 
    }; 

    }); 
angular.bootstrap(document, ['app', 'uiCropper']);

CSS:

.croparea { 
    background: #E4E4E4; 
    overflow: hidden; 
    min-width:350px; 
    min-height:350px; 
} 
.image-container{ 
    display: flex; 
    .image { 
    width: 200px; 
    height: 300px; 
    } 
}

Toutes les idées sur la façon de mak Mon image est-elle affichée pour le paramètre imageToCrop dans cette directive?

Source

2017-01-11 Vali D

vous devriez changer votre css,

<div class="croparea"> 
    <ui-cropper image="imageToCrop" result-image="myCroppedImage" area-type="rectangle"></ui-cropper> 
    </div>

l'image de rendu directive <ui-cropper> avec la taille du récipient d'entre eux (hauteur: 100%).

votre conteneur .croparea n'a pas de réel hauteur.

changer:

min-height:350px;

à:

height:350px;

fera la différence.

Essayez de jeter un coup d'oeil à votre jsfiddle de travail.

Bonne chance!

Source

2017-01-11 14:14:27 YairTawil

Super !! En fait, il a résolu le problème. –

L'image d'ui-cropper ne charge pas

Répondre

Questions connexes