используйте jQuery, чтобы получить «истинный размер» изображения без удаления класса

Я использую Jcrop для изображения, размер которого изменен с помощью CSS для единообразия.

JS

<script type="text/javascript">
    $(window).load(function() {
        //invoke Jcrop API and set options
        var api = $.Jcrop('#image', { onSelect: storeCoords, trueSize: [w, h] });
        api.disable(); //disable until ready to use

        //enable the Jcrop on crop button click
        $('#crop').click(function() {
            api.enable();
        });
    });
    function storeCoords(c) {
    $('#X').val(c.x);
    $('#Y').val(c.y);
    $('#W').val(c.w);
    $('#H').val(c.h);
    };
</script>

HTML

<body>
    <img src="/path/to/image.jpg" id="image" class="img_class" alt="" />
     <br />
     <span id="crop" class="button">Crop Photo</span>
     <span id="#X" class="hidden"></span>
     <span id="#Y" class="hidden"></span>
     <span id="#W" class="hidden"></span>
     <span id="#H" class="hidden"></span>
</body>

CSS

body { font-size: 13px; width: 500px; height: 500px; }
.image { width: 200px; height: 300px; }
.hidden { display: none; }

Мне нужно установить переменные h и w в соответствии с размером фактического изображения. Я попытался использовать манипулятор .clone(), чтобы сделать копию изображения, а затем удалить класс из клона, чтобы получить размер, но он устанавливает переменные в нули.

var pic = $('#image').clone();
pic.removeClass('image');
var h = pic.height();
var w = pic.width();

Это работает, если я добавляю изображение к элементу на странице, но это более крупные изображения, и я бы предпочел не загружать их как скрытые изображения, если есть лучший способ сделать это. Кроме того, удаление класса, установка переменных, а затем повторное добавление класса приводило к спорадическим результатам.

Я надеялся на что-то вроде:

$('#image').removeClass('image', function() {
    h = $(this).height();
    w = $(this).width();
}).addClass('image');

Но функция removeClass так не работает :P


jquery image-manipulation jcrop removeclass
person jon3laze    schedule 08.01.2011    source источник
comment
возможный дубликат Получить истинные размеры изображения с помощью JQuery   -  person Pekka    schedule 08.01.2011
comment
Не совсем... Я понимаю, как получить высоту/ширину изображения. Мой вопрос в том, как лучше всего это сделать, не изменяя изображение (удаляя класс).   -  person jon3laze    schedule 08.01.2011
comment
Поскольку вы загружаете его скрыто, есть ли шанс, что вы можете загрузить его в полном размере, затем изменить HTML, чтобы установить желаемую ширину и высоту? Ведь вам в любом случае придется скачивать полноразмерное изображение   -  person Joe Mabel    schedule 08.01.2011
comment
@Joe Mabel Это то, чем я сейчас занимаюсь, я хотел посмотреть, может быть, есть лучший способ, при котором конечный пользователь не загрузит его дважды. Возможно, этот метод является единственным/лучшим способом.   -  person jon3laze    schedule 08.01.2011
comment
@JoeMabel: Можете ли вы подробно описать «спорадические результаты», которые вы видели при удалении и последующем добавлении класса?   -  person Andrew Whitaker    schedule 08.01.2011
comment
@Andrew Whitaker: спорадические результаты, которые я наблюдал, заключались в том, что класс изображения случайно не применялся правильно, и изображение отображалось в полном размере, а также в нескольких случаях, когда оно вообще не отображалось. Я не собираюсь обвинять сам метод, так как это могут быть конфликты с другими скриптами или захлебывание .NET. До сих пор я смирился с тем, что клонировал изображение, скрывал его, а затем вытягивал размеры таким образом.   -  person jon3laze    schedule 08.01.2011
comment
@jon3laze: Хорошо, я смог заставить его работать с одним изображением и скрыть изображение, удалить класс, выполнить измерения, добавить класс, а затем снова показать элемент. Не уверен, что произойдет, если это будет сделано с несколькими изображениями.   -  person Andrew Whitaker    schedule 08.01.2011
comment
@Эндрю Уитакер: я совершенно забыл, что не показывал изображение, пока не сделал измерения и не добавил класс. Спасибо, если вы хотите опубликовать это как ответ, я приму это.   -  person jon3laze    schedule 08.01.2011

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте скрыть изображение, затем снять размеры, а затем показать его:

var $img = $("#image");
$img.hide().removeClass("image");
var width = $img.width();
var height = $img.height();
$img.addClass("image").show();

Это должно устранить любое странное поведение, которое вы можете увидеть при добавлении и удалении класса.

person Andrew Whitaker    schedule 08.01.2011

arrow_upward
1
arrow_downward

Возможно, вы можете клонировать изображение (это не должно быть очень болезненно для сети, потому что оно должно быть кэшировано) и получить размер клонированного изображения:

$newImg = $("#image").clone();
$newImg.css("display", "none").removeClass("image").appendTo("body");
var width = $newImg.width(), height = $newImg.height();
$newImg.remove();

Удачи!

person Gonzalo Larralde    schedule 08.01.2011