首页 > web前端 > js教程 > 如何在WebKit浏览器中准确获取真实图像尺寸?

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

Linda Hamilton
发布: 2024-12-17 12:13:25
原创
563 人浏览过

How to Accurately Get Real Image Dimensions in WebKit Browsers?

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

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

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

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

$("<img/>") // 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板