Question

我一直在尝试在缩放图像上制作imgareaselect插件，使用css max-width：100％和max-height：100％动态缩放图像，使其适合其容器。

正如您在上面的小提琴中看到的那样，预览在选择中没有显示相同的内容，尝试选择树后面的地平线，您可以清楚地看到它。

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;
    }

你可以看到我试图制作一个动态宽高比，我认为它也不起作用。

Answer 1

也许我迟到了，但我就在这里。

如果您的预览容器是150px * 150px，那么拥有动态aspectRatio并不好看，您只需将其设置为＆＃34; 1：1＆＃34;。

//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

Answer 2

因为aspectRatio用于强制选择宽高比。

如果要使用css修改图像大小并准确剪切，则需要传递imageWidth和imageHeight：

$(selector).imgAreaSelect({
    imageWidth: 1920,
    imageHeight: 1080
});

imgareaselect在缩放图像上预览不能正常工作

2 个答案: