ui-cropper 图像未加载答案

【问题标题】：ui-cropper image not loadingui-cropper 图像未加载
【发布时间】：2017-01-11 13:46:47
【问题描述】：

我在我的 Angular 项目中使用 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;
  }
}

关于如何在此指令中为imageToCrop 参数显示我的图像有什么想法吗？

【问题讨论】：

标签： angularjs angularjs-directive crop

【解决方案1】：

你应该改变你的CSS，

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

<ui-cropper> 指令从它们的容器中渲染图像大小（高度：100%）。

您的容器.croparea 没有真正的高度。

改变：

min-height:350px;

到：

height:350px;

会有所作为。

试着看看你的工作 jsfiddle。

祝你好运！

【讨论】：