ui-cropper 图片未加载

Question

我在我的 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 参数有什么想法吗？

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 图片未加载

ui-cropper image not loading

crop

angularjs

angularjs-directive