如何在WebKit浏览器中准确获取图片尺寸？

在 Webkit 浏览器中准确检索图像尺寸

在 Safari 和 Chrome 等 Webkit 浏览器中测量图像的真实尺寸可能具有挑战性。删除内联宽度和高度属性以及测量图像的实际尺寸等传统方法无法考虑这些浏览器在图像加载后设置尺寸的情况。

利用图像的 Onload 事件

更可靠的方法是利用图像的 onload 事件，而不是依赖超时。这允许您在图像完全加载后捕获尺寸：

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

利用 NaturalHeight 和 NaturalWidth 属性

现代浏览器支持 HTML5 属性 naturalHeight 和 naturalWidth，无论 CSS 如何，它都能提供图像的真实尺寸。这种方法更加简洁：

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

通过利用这些技术，您可以在 Webkit 浏览器中准确检索图像的真实宽度和高度，从而实现更精确的图像操作和显示。

以上是如何在WebKit浏览器中准确获取图片尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！