Mam problem z wtyczką IMGAREaselect w Bootstrap. Ustawiłem rodzic w inicjowaniu imgareaselect, aby zapobiec przewijaniu obszaru ruchomego:

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

I to jest mój 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>

Próbuję wybrać obszar, imgareaselect wybiera obszar poza obrazem, ale punkty (mam na myśli X1, X2 etc), są dokładnie tak, że chcę (funkcjonalność działa poprawnie, ale w interfejsie istnieje problem). W mniejszym urządzeniu interfejs IMGAREASELECELECTE jest NIT, ale w jakiejś sytuacji się staje! Szukałem dużo, ale nie znalazłem nic przydatnego. Jak mogę rozwiązać ten problem?

Aktualizacja : Rozwiązałem to moje ... Zobacz ten link: github

Musimy usunąć te linie z kodu:

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

I musimy stanowić względne pole rodzicielskie, które zainicjowaliśmy sobie (rodzic: "#Thumbbox").

12
paradise_human 1 grudzień 2013, 20:38

5 odpowiedzi

Najlepsza odpowiedź

Mam na myśli rodzica Div of Image, który chcesz użyć obszaru obrazu, należy wybrać na nim, musi być względna pozycja.

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

I musimy usunąć te linie z jQuery.imgareaselect.js:

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';
4
paradise_human 7 maj 2015, 09:01

Miał ten sam problem. Rozwiązanie brzmiał:

parent:$('.modal-content')

Musisz ustawić zawartość modalną jako pojemnika nad rodzicem.

8
user2118788 17 kwiecień 2015, 15:48

Istnieje kilka scenariuszy, które Bootstrap.CSS mogą wpływać na Twój ImamaEaselect. Dla mnie Ustawianie rozmiaru pudełka: Content-box na obrazie Naprawiono mój problem.

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

Wolę zastąpić CSS Inline VS modyfikowanie pliku Bootstrap.css, ponieważ te chan mogą wpływać na cały system.

Jeśli wpadniesz w problemy z bootstrap.css wpływającym na kod, komentuj sekcje bootstrap.css, aż znajdziesz, który styl wpływa na Ciebie.

3
brandon schatz 25 styczeń 2014, 08:40

Ludzie, którzy mają problemy z tym w połączeniu z bootstrap 2

Idź do bootstrap.css i skomentuj następującą linię

img {
    width: auto\9;
    height: auto;
    /* max-width: 100%; DISABLE FOR IMGAREASELECT */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
1
Miguel Stevens 24 styczeń 2014, 10:06

Miałem ten sam problem. Byłem szukany rozwiązanie na tym wątku, wypróbowałem wszystkie opcje. Ale kiedy przeczytałem dokumentację, znalazłem to 2 właściwości:

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) 

Nie ma potrzeby zmiany żadnego kodu JS lub CSS. Jedyne do zrobienia jest ustawienie tych 2 właściwości z rzeczywistym rozmiarem obrazu.

Coś takiego:

var image = $("#image");

image.imgAreaSelect({
    imageHeight: image[0].naturalHeight,
    imageWidth: image[0].naturalWidth
});
1
HolloW 25 lipiec 2016, 15:06