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

在 WebKit 浏览器中检索真实图像尺寸

尝试在 WebKit 浏览器中使用 JavaScript 确定图像的实际宽度和高度，例如Safari 或 Chrome 通常会导致零值。这是因为 WebKit 仅在图像完全加载后更新这些属性。

要克服此限制，我们建议使用图像的 onload 事件而不是超时。这种方法使我们能够更准确地检索实际尺寸：

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img  alt="如何在WebKit浏览器中准确获取真实图像尺寸？" >") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

此技术可确保我们检索实际图像尺寸而不受 CSS 样式的任何干扰。

另一种选择是利用HTML5 属性naturalHeight 和naturalWidth。这些属性提供了图像固有的、无样式的尺寸，无论 CSS 操作如何：

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

通过实现这些方法，我们可以在 Safari 和 Chrome 等 WebKit 浏览器中准确访问图像的真实尺寸。

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