ui-cropper画像が読み込まれない

私の目玉プロジェクトでui-cropperという指示文を使用しています。ui-cropper画像が読み込まれない

画像のリストから選択した画像を切り抜きたいが、何らかの理由で選択した画像が指定された領域に表示されないが、この選択された画像の切り取った部分が表示されますが、。ここで

は、問題を示すjsfiddleです：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; 
    } 
}

MAKする方法についての任意のアイデアこのディレクティブにimageToCropパラメータが表示されますか？

出典

2017-01-11 Vali D

あなたがそれらのコンテナ（高さ：100％）からのサイズで画像をレンダリング<ui-cropper>ディレクティブは、

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

をあなたのCSSを変更する必要があります。

お客様のコンテナ.cropareaには、実際にはの高さがありません。

変更：

min-height:350px;

に：

height:350px;

が違いを生むだろう。

作業中のjsfiddleを見てみてください。

Good Luck！

出典

2017-01-11 14:14:27 YairTawil

素晴らしい！それは実際に問題を解決しました。 –

ui-cropper画像が読み込まれない

答えて

関連する問題