如何在 WebKit 浏览器中可靠地获取图像尺寸？

在 Webkit 浏览器中确定图像尺寸

在开发 JavaScript 插件时，获取图像的实际宽度和高度至关重要。虽然传统方法在 Firefox、IE 和 Opera 中有效，但在 Safari 和 Chrome 中失败，返回值为零。

WebKit 独特的图像加载行为

与与其他浏览器相比，Webkit 仅在加载图像后才设置图像的高度和宽度属性。此行为需要采用不同的方法来检索真实的图像尺寸。

利用图片加载事件

推荐的解决方案涉及使用图像的 onload 事件。下面是解决该问题的修改后的代码片段：

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

避免 CSS 效果

为了防止 CSS 效果影响尺寸，代码创建了一个 in-图像的内存副本。此技术可确保检索到的值准确反映实际图像大小。

替代方法：HTML5 属性

HTML5 提供了naturalHeight 和naturalWidth 属性，也可以使用这些属性检索真实图像尺寸。然而，不同浏览器对这些属性的支持有所不同。

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