gpt4 book ai didi

jquery - 使用 jQuery 获取图像的 'true size' 而不删除该类

转载 作者:行者123 更新时间:2023-12-01 00:12:18 26 4
gpt4 key购买 nike

我正在使用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; }

我需要将 hw 变量设置为实际图像的大小。我尝试使用 .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

最佳答案

尝试隐藏图像,然后获取尺寸,然后显示它:

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

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

关于jquery - 使用 jQuery 获取图像的 'true size' 而不删除该类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4631648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com