缩放图像上的 imgareaselect 预览无法正常工作
Posted
技术标签:
【中文标题】缩放图像上的 imgareaselect 预览无法正常工作【英文标题】:imgareaselect on scaled image with preview not working properly 【发布时间】:2014-02-28 06:06:05 【问题描述】:我一直在尝试让 imgareaselect 插件在缩放后的图像上工作,使用 css max-width:100% 和 max-height:100% 动态缩放图像以使其适合其容器。
试试:http://jsfiddle.net/37wcJ/
正如您在上面的小提琴中看到的,预览在选择中没有显示相同的东西,尝试选择树后面的地平线,您可以清楚地看到它。
html:
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" id="croptarget">
<div id="preview-cont">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" id="preview">
</div>
</div>
带有 imgareaselect 插件的 Jquery
$(document).ready(function()
function preview(img, selection)
if (!selection.width || !selection.height)
return;
var scaleX = 150 / selection.width;
var scaleY = 150 / selection.height;
$('#preview').css(
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
);
//dynamic aspect ratio
var daspectratio = $('#croptarget').height() / $('#croptarget').width();
var paspectratio = $('#preview-cont').height() / $('#preview-cont').width();
var dyap =daspectratio+":" + paspectratio;
$('#croptarget').imgAreaSelect(
aspectRatio: dyap,
handles: true,
fadeSpeed: 200,
onSelectChange: preview
);
);
CSS
#container
background-color:#ccc;
width:400px;
height:300px;
#croptarget
max-width:100%;
max-height:100%;
#preview-cont
width:150px;
height:150px;
overflow:hidden;
border:1px solid #000;
float:right;
您可以看到我正在尝试制作动态纵横比,我认为这也不起作用。
【问题讨论】:
【参考方案1】:也许我迟到了,但我来了。
如果您的预览容器是 150px * 150px,那么动态宽高比看起来不太好,您可以简单地将其设置为“1:1”。
//static aspectRatio
$('#croptarget').imgAreaSelect(
aspectRatio: "1:1",
handles: true,
fadeSpeed: 200,
onSelectChange: preview
);
然后,你可以把预览功能改成这样:
$('#preview').css(
width: Math.round(scaleX * $("#croptarget").width())+"px",
height: Math.round(scaleY * $("#croptarget").height())+"px",
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
);
你需要获取大图的宽高,所以函数会计算出预览图需要的精确宽高。
这是你的modified jsfiddle
【讨论】:
【参考方案2】:因为aspectRatio
用于强制选择宽高比。
如果你想用 css 修改你的图片大小,并准确地切割,你需要传递 imageWidth 和 imageHeight:
$(selector).imgAreaSelect(
imageWidth: 1920,
imageHeight: 1080
);
【讨论】:
以上是关于缩放图像上的 imgareaselect 预览无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章
当图像重新缩放以适合画布时,织物 js 上的裁剪功能无法正常工作