使用 jQuery 获取“真实尺寸”图像而不删除类

发布于 2024-10-11 09:40:07 字数 1892 浏览 7 评论 0原文

我在使用 css 调整大小以实现均匀性的图像上使用 Jcrop 。

<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

原文

I am using Jcrop on an image that is resized with css for uniformity.

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

I need to set the h and w variables to the size of the actual image. I tried using the .clone() manipulator to make a copy of the image and then remove the class from the clone to get the sizing but it sets the variables to zeros.

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

It works if I append the image to an element in the page, but these are larger images and I would prefer not to be loading them as hidden images if there is a better way to do this. Also removing the class, setting the variables, and then re-adding the class was producing sporadic results.

I was hoping for something along the lines of:

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

But the removeClass function doesn't work like that :P

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蹲在坟头点根烟 2024-10-18 09:40:07

尝试隐藏图像，然后获取尺寸，然后显示它：

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

这应该消除您在添加和删除类时可能看到的任何奇怪行为。

Try hiding the image, then take the dimensions, then show it:

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

This should remove any weird behavior you might see while adding and removing the class.

回复收藏 0 原文

疧_╮線 2024-10-18 09:40:07

也许你可以克隆图像（不应该对网络造成极大的痛苦，因为它应该被缓存），并获得克隆图像的大小：

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

祝你好运！

Maybe you can clone the image (should not be extremely network-painful, because it should be cached), and get the size of the cloned one:

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

Good luck!

回复收藏 0 原文

~没有更多了~