如何使用 jCrop 调整图像大小以适应所有纵横比？
小塞萨尔·罗德里格斯
我正在使用 Jcrop 调整宽高比为 1 的图像大小。在大多数情况下效果很好，但是在某些情况下，当图像较宽时，我无法选择所有图像。我可以做什么样的动作来选择图像的全部内容？
我的代码是：
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,
});
}}
我尝试添加一些我在网上查看的缩放实现，但是缩放会影响选择区域，结果是相同的。我需要能够选择图像的所有内容。
凑
设置aspectRatio: 1意味着你总是想要一个正方形的选择，如果图像是矩形的（高度大于宽度，反之亦然），你将无法选择整个图像。
一种解决方案是删除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));
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用JCrop保存裁剪的图像
- 2
如何使用jcrop裁剪不同尺寸的图像
- 3
Extjs Jcrop-使用预览裁剪图像
- 4
尝试通过scala Scrimage lib使用Jcrop和服务器端图像调整大小
- 5
尝试通过Scala Scrimage lib使用Jcrop和服务器端图像调整大小
- 6
Jcrop保存以前的图像
- 7
对齐Jcrop图像
- 8
使用JCrop裁剪图像绘制到画布中
- 9
使用JCrop裁剪绘制到画布中的图像
- 10
PHP 使用纵横比调整图像大小
- 11
JCrop-移动/调整大小选择时，JCrop持有人显示不正确的图像
- 12
如何从jCrop获取height属性
- 13
Jcrop大图像真实尺寸
- 14
使用gd lib或将FileReader（）与Jcrop一起使用，哪种是处理图像的更好方法？
- 15
JCrop如何通过将其拖动到div上来裁剪图像（例如facebook封面）
- 16
调整图片大小后出现Jcrop问题-jQuery
- 17
JCrop将选择的大小调整为错误的值
- 18
JCrop将选择的大小调整为错误的值
- 19
使用drawInRect调整图像大小，同时保持纵横比不变，例如“缩放纵横比填充”？
- 20
使用JCROP和JQUERY通过基于jsp..url的图像源/动态图像无法裁剪图像
- 21
使用PHP重新调整目录中所有图像的大小？
- 22
使用PHP重新调整目录中所有图像的大小？
- 23
使用CSS调整所有大图像的大小
- 24
所有图像调整大小后如何触发调整大小事件
- 25
使用文本自动调整大小来调整WebView中所有图像的大小
- 26
如何使用带有bash的convert命令来调整给定目录中所有图像的大小？
- 27
如何检查jcrop是否已初始化
- 28
使用设置选择选项时JCrop插件损坏
- 29
使用Jcrop裁剪并上传大尺寸图片
我来说两句