используйте jQuery для получения «истинного размера» изображения без удаления класса - PullRequest
Новая
       2

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

4 голосов
/ 08 января 2011

Я использую 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

Ответы [ 2 ]

4 голосов
/ 08 января 2011

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

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

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

1 голос
/ 08 января 2011

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

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

Удачи!

...