Неправильное положение imgareaselect плагин в загрузочном модальном окне

у меня проблема с плагином imgAreaSelect в Bootstrap. Я установил parent в инициализации 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").

11
css html javascript jquery twitter-bootstrap

6 ответов

была такая же проблема. решение:

parent:$('.modal-content')

вам нужно установить модальное содержимое в качестве родительского не контейнера изображения.

7

существует несколько сценариев начальной загрузки.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 против изменения начальной загрузки.css файл, потому что те Чан это может повлиять на всю систему.

Если у вас возникли проблемы с Bootstrap.css влияет на ваш код, комментирует разделы bootstrap.css, пока вы не найдете, какой стиль влияет на вас.

3

Я имею в виду Родительский 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';
3

HTML:

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

JQUERY:

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

устранение:

используйте опцию "parent", чтобы исправить imgAreaSelect для родительского div/окна.

2

люди, которые имеют проблемы с этим в сочетании с Bootstrap 2

перейти к загрузке.css и прокомментируйте следующую строку

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

у меня была та же проблема. Я искал решение в этой теме, пробуя все варианты. Но, когда я прочитал документацию, я нашел это 2 свойства:

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