如何使用 jCrop 调整图像大小以适应所有纵横比?
How to resize image to fit all the aspect ratio using jCrop?
我正在使用 Jcrop 调整宽高比为 1 的图像。在大多数情况下效果很好,但在某些情况下,当图像较宽时,我无法 select 所有图像。我可以对 select 图片的全部内容执行什么样的操作?
我的代码是:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#jimage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#jimage').Jcrop({
onSelect: showCoords,
aspectRatio: 1,
bgColor: '#2e7cce',
bgOpacity: .4,
boxWidth: 500,
});
}}
我试图添加一些我在网上看到的缩放实现,但是缩放会影响 selection 的区域,结果是一样的。我需要能够select图像的所有内容。
设置 aspectRatio: 1
意味着你总是想要一个正方形 selection,如果图像是矩形(高度大于宽度或反之亦然)。
一种解决方案是删除 aspectRatio: 1
这将允许自由裁剪。
另一种解决方案是在将图像传递给 Jcrop 之前将其缩放为正方形。
reader.onload = function(e) {
$('#jimage').attr('src', e.target.result);
width = $('#jimage').width();
height = $('#jimage').height();
if(height > width )
$('#jimage').width(width * (height/width));
else if(width > height)
$('#jimage').height(height * (width/height));
}
我正在使用 Jcrop 调整宽高比为 1 的图像。在大多数情况下效果很好,但在某些情况下,当图像较宽时,我无法 select 所有图像。我可以对 select 图片的全部内容执行什么样的操作?
我的代码是:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#jimage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#jimage').Jcrop({
onSelect: showCoords,
aspectRatio: 1,
bgColor: '#2e7cce',
bgOpacity: .4,
boxWidth: 500,
});
}}
我试图添加一些我在网上看到的缩放实现,但是缩放会影响 selection 的区域,结果是一样的。我需要能够select图像的所有内容。
设置 aspectRatio: 1
意味着你总是想要一个正方形 selection,如果图像是矩形(高度大于宽度或反之亦然)。
一种解决方案是删除 aspectRatio: 1
这将允许自由裁剪。
另一种解决方案是在将图像传递给 Jcrop 之前将其缩放为正方形。
reader.onload = function(e) {
$('#jimage').attr('src', e.target.result);
width = $('#jimage').width();
height = $('#jimage').height();
if(height > width )
$('#jimage').width(width * (height/width));
else if(width > height)
$('#jimage').height(height * (width/height));
}