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

Question

I have a problem with imgAreaSelect plugin in Bootstrap. I set parent in initializing imgAreaSelect to prevent scroll moving area :

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

and this is my 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>

whene I trying to select an area,ImgAreaSelect selects an area outside the picture but points ( I mean x1,x2 etc) are exactly that I want(the functionality works correct but in interface there is problem). In smaller devices's,ImgAreaSelect interface is nit but in some situation it mess up ! I used to search a lot but i didn't find anything useful. How can i fix this problem ?

UPDATE : I solved this My self... Refer to this link : github

We must remove these lines from code :

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

And we must position relative the parent box that we initialized ourselves( parent: "#thumbBox").

Answer 1

Had same problem. solution was:

parent:$('.modal-content')

you need to set modal content as parent not image container.

Answer 2

I mean the parent div of Image that you want to use image area select on it , must be position relative .

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

And We must remove these lines from jquery.imageareaselect.js :

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

Answer 3

There are several scenarios that bootstrap.css can affect your imgareaselect. For me setting box-sizing:content-box on the image fixed my problem.

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

I prefer to overwrite the css inline vs modifying the bootstrap.css file because those chan it can affect the whole system.

If you run into issues with bootstrap.css affecting your code, comment out sections of bootstrap.css until you find which style is affecting you.

Answer 4

HTML:

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

JQUERY:

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

SOLUTION:

Use "parent" option to fix the imgAreaSelect to a parent div/window.

Answer 5

People who are having trouble with this in combination with Bootstrap 2

Go to bootstrap.css and comment out the following line

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

Answer 6

I had the same issue. I was looked for a solution on this thread, trying all options. But, when I read the documentation I found this 2 properties:

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) 

So, there is no need to change any code of js or css. The only thing to do is set these 2 properties with the real size of the image.

Something like this:

var image = $("#image");

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