缩放图像上的 imgareaselect 预览无法正常工作

Posted 2023-02-25

【中文标题】缩放图像上的 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
);