ui-cropper 图像未加载
Posted
技术标签:
【中文标题】ui-cropper 图像未加载【英文标题】：ui-cropper image not loading 【发布时间】：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 参数显示我的图像有什么想法吗？
【问题讨论】：
【参考方案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 图像未加载的主要内容，如果未能解决你的问题，请参考以下文章
你如何启动cropper以在fengyuanchencropper中裁剪图像
使用 CodeIgniter 和 Cropper 进行图像裁剪