Question

我在我的角项目中使用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参数显示图像的任何想法？

Answer 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。

祝你好运！

ui-cropper图片未加载

1 个答案: