我在fengyuanchen jQuery Cropper.js v3.0.0上遇到了一些问题。我正在尝试覆盖默认预览代码,使其与原始图像的显示尺寸相同。
我目前遇到的问题是,一旦图像的高度超过原始图像的显示尺寸,预览就会比原始图像大得多。我希望它保持在同一高度。
默认行为显示的预览小于原始图像:
我想要的是让预览保持与原始图像相同的高度,而不是超过它:
这是我的代码:
<div class="col col-6">
<img id="image" src=picture.jpg>
</div>
<div class="col col-3">
<div class="preview"></div>
</div>
//css
.preview {
overflow: hidden;
width: 200px;
height: 200px;
}
//JS:
$(function() {
var $preview = $('.preview');
var cropper = $('#image').cropper({
ready: function (e) {
var $clone = $(this).clone().removeClass('cropper-hidden');
$clone.css({
display: 'block',
width: '100%',
minWidth: 0,
minHeight: 0,
maxWidth: 'none',
maxHeight: 'none'
});
$preview.css({
width: '100%',
overflow: 'hidden'//,
//maxHeight: $(this).cropper('getContainerData').height + 'px'
}).html($clone);
},
crop: function(e) {
var imageData = $(this).cropper('getImageData'),
previewAspectRatio = e.width / e.height,
previewWidth = $preview.width(),
previewHeight = previewWidth / previewAspectRatio,
imageScaledRatio = e.width / previewWidth;
//if (previewHeight > $(this).cropper('getContainerData').height) {
//???
//}
$preview.height(previewHeight).find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.y / imageScaledRatio
});
}
});
});
答案 0 :(得分:1)
事实证明,我并不需要那么多代码来按照我想要的方式调整预览大小。我只需要将预览的最大尺寸设置为原始BEFORE实例化裁剪器的尺寸。
出于某种原因,我需要在高度上添加4个像素,以使预览与原始图像完全相同。也许裁剪帆布在图像周围增加了额外的高度和宽度?
$(function() {
var $image = $('#image'),
$image.height() + 4;
$('.preview').css({
width: '100%', //width, sets the starting size to the same as orig image
overflow: 'hidden',
height: height,
maxWidth: $image.width(),
maxHeight: height
});
$image.cropper({
preview: '.preview'
});
});