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").

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").

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Great, this fix imgAreaSelect plugin also in a foundation reveal. Thank you – tuxone Commented Jan 22, 2014 at 18:30
• Where do you remove those lines? Having the same problem – Miguel Stevens Commented Jan 24, 2014 at 9:33
• Is there a reason this fix has not been accepted in imgAreaSelect? – Markus Johansson Commented Jun 16, 2014 at 19:15
• Did you fix this issue? It's still completely in the wrong position :( any help would be welcome! – Miguel Stevens Commented Aug 27, 2014 at 9:32
• Did you remove the peace of code from the js ? – paradise_human Commented Aug 27, 2014 at 12:14

6 Answers 6

Had same problem. solution was:

parent:$('.modal-content')

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

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.

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

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.

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

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