缩放图像上的 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 上的裁剪功能无法正常工作

jQuery插件ImgAreaSelect 实例讲解二

imgAreaSelect + 即时更改 aspectRatio

imgAreaSelect 中文文档

在弹出窗口上预览图像,无法正确显示

如何在 QGraphicsScene 中缩放图像? (Qt 5.11)