Неверная позиция imgAreaSelect плагин в модальном окне загрузки

У меня проблема с плагином imgAreaSelect в Bootstrap. Я устанавливаю родительский элемент в инициализацию 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';

И мы должны поместить относительный родительский ящик, который мы инициализировали (parent: "#thumbBox" ).

Ответ 1

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

Ответ 2

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

parent:$('.modal-content')

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

Ответ 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 inline и модифицировать файл bootstrap.css, потому что эти chan могут влиять на всю систему.

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

Ответ 4

HTML:

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

Jquery:

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

РЕШЕНИЕ:

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

Ответ 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;
}

Ответ 6

У меня была такая же проблема. Я искал решение этой темы, пытаясь использовать все варианты. Но когда я прочитал документацию, я нашел это 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
});