[英]Fengyuanchen cropper zooms too much and loss of quality for images
我从带有此配置的应用程序的Crop Avatar示例开始
this.$img.cropper({
preview: this.$avatarPreview.selector,
viewMode: 2,
dragMode: 'move',
guides: false,
highlight: false,
autoCropArea: 1,
movable: true,
strict: true,
cropBoxResizable: false,
minCropBoxWidth: 1000,
minCropBoxHeight: 1000,
zoom: function (e) {
if (e.ratio > 1) {
e.preventDefault();
$(this).cropper('zoomTo', 1);
}
},
像这样使用它,我可以缩放到比率1,但是对于较小的图像来说,它太多了。 例如,可以将比例为1的1200x1200图像缩放到将其保存为1000x1000的水平,这样会损失很多画质。 我试图用$(this).cropper('zoomTo', 1);
但这会产生奇怪的效果。如果我放大很多,它会使我回到原始大小。
我的问题是如何阻止缩放到x0.2或合理的值。谢谢
这个答案来自冯元琛,他开发了裁剪机,我认为这符合我对不同设备上不同分辨率的裁剪机的需求
$().cropper({
zoom: function (e) {
var container = $(this).cropper('getContainerData');
// Desktop
if (container.width > 1120) {
// Zoom in
if (e.ratio > e.oldRatio) {
if (e.ratio > 10) {
e.preventDefault();
}
// Zoom out
} else {
if (e.ratio < 0.1) {
e.preventDefault();
}
}
// Laptop
} else if (container.width > 992) {
// ...
// Tablet
} else if (container.width > 768) {
// ...
// Phone
} else {
// ...
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.