引导模式窗口中的错误位置 imgAreaSelect 插件

Question

我在 Bootstrap 中遇到了 imgAreaSelect 插件的问题。 我在初始化 imgAreaSelect 时设置了父级以防止滚动移动区域：

 thumb.imgAreaSelect({
 handles: true,
 aspectRatio: '1:1',
 fadeSpeed: 300,
 parent: "#thumbBox"
 })

这是我的html：

<div class="modal-body">
            <div class="row">
                <div class="col-xs-12" style="font-weight:bold;">
                    Upload your picture and crop it.
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div id="thumbBox">
                        <img id="thumb" class="img-responsive" />
                    </div>
                </div>
            </div>

当我尝试选择一个区域时，ImgAreaSelect 会选择图片之外的一个区域，但点（我的意思是 x1、x2 等）正是我想要的（功能正常但在界面中有问题）。 在较小的设备中，ImgAreaSelect 界面是 nit 但在某些情况下它会搞砸！ 我曾经搜索了很多，但我没有找到任何有用的东西。 我该如何解决这个问题？

更新： 我解决了这个我自己... 参考这个链接： github

我们必须从代码中删除这些行：

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';

我们必须相对于我们自己初始化的父框定位（父：“#thumbBox”）。

Answer 1

我有同样的问题。我在这个线程上寻找解决方案，尝试所有选项。 但是，当我阅读文档时，我发现了这两个属性：

http://odyniec.net/projects/imgareaselect/usage.html

imageHeight - True height of the image (if scaled with the CSS width and height properties) 
imageWidth - True width of the image (if scaled with the CSS width and height properties) 

因此，无需更改任何 js 或 css 代码。 唯一要做的就是将这 2 个属性设置为图像的实际大小。

类似这样的：

var image = $("#image");

image.imgAreaSelect({
    imageHeight: image[0].naturalHeight,
    imageWidth: image[0].naturalWidth
});

Answer 2

我的意思是你想在它上面使用图像区域选择的Image的父div，必须是相对位置的。

 <div id="thumbBox" style="position:relative;">
     <img id="thumb" class="img-responsive" />
   </div>

我们必须从 jquery.imageareaselect.js 中删除这些行：

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';

Answer 3

有同样的问题。 解决方案是：

parent:$('.modal-content')

您需要将模态内容设置为父容器而不是图像容器。

Answer 4

HTML：

<div><img id="cropimage" /></div>

JQUERY：

$(function () {
 $('#cropimage').imgAreaSelect({ handles: true, parent: "cropimage", maxWidth: 200, maxHeight: 200, aspectRatio: '4:3' });
});

解决方案：

使用“父”选项将 imgAreaSelect 固定为父 div/窗口。

Answer 5

bootstrap.css 会在多种情况下影响您的 imgareaselect。对我来说，在图片上设置 box-sizing:content-box 解决了我的问题。

<img id="cartPhoto" class="cartImageThumb" style="box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;">

我更喜欢覆盖内联的 css 而不是修改 bootstrap.css 文件，因为它会影响整个系统。

如果您遇到影响代码的 bootstrap.css 问题，请注释掉 bootstrap.css 的部分，直到找到影响您的样式。

Answer 6

结合 Bootstrap 2 遇到此问题的人

转到 bootstrap.css 并注释掉以下行

img {
    width: auto\9;
    height: auto;
    /* max-width: 100%; DISABLE FOR IMGAREASELECT */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}