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接口是尼特，但在某些情况下它会搞砸！我曾经搜索过很多，但我找不到任何有用的东西。我该如何解决这个问题？

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

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

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

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

Answer 1

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

parent:$('.modal-content')

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

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

有几种情况，bootstrap.css会影响你的imgareaselect。对我来说，设置框大小：图像上的内容框修复了我的问题。

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

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

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

Answer 4

<强> HTML：

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

<强> JQUERY：

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

<强> SOLUTION：

使用＆＃34; parent＆＃34;用于将imgAreaSelect修复为父div /窗口的选项。

Answer 5

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

Answer 6

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

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

var image = $("#image");

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

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

这样的事情：

foo

错误的位置imgAreaSelect插件在bootstrap模式窗口中

6 个答案: