logo标签列表

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

jqueryimage-manipulationremoveclassjcrop
4
我正在使用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
不是这样的...我知道如何获取图像的高度/宽度。我的问题是，在不改变图像（删除类）的情况下，最好的方法是什么。 - jon3laze
@Joe Mabel，这就是我目前正在做的事情，我想知道是否有更好的方法，使最终用户不会加载两次。也许这种方法是唯一/最好的方法。 - jon3laze
@JoeMabel：您能详细说明删除然后重新添加类时出现的“零星结果”吗？ - Andrew Whitaker
@jon3laze：好的，我成功地用一张图片实现了它，方法是隐藏这张图片，删除类名，测量尺寸，添加类名，然后再显示这个元素。不确定如果有多张图片时会发生什么。 - Andrew Whitaker
@Andrew Whitaker：我完全忽略了在测量和添加类之前不显示图像。谢谢，如果你想把它作为答案发布，我会接受的。 - jon3laze
显示剩余3条评论
2个回答
4

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

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

这样做可以消除在添加和移除类时可能出现的任何奇怪行为。
1
也许你可以克隆图像（这应该不会非常依赖网络，因为它应该是缓存的），并获得克隆图像的大小：
$newImg = $("#image").clone();
$newImg.css("display", "none").removeClass("image").appendTo("body");
var width = $newImg.width(), height = $newImg.height();
$newImg.remove();

祝你好运！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接