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

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

Mary-Kate Olsen
发布: 2024-12-07 07:03:12
原创
899 人浏览过

How Can I Accurately Get Image Dimensions in WebKit Browsers?

在 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中文网其他相关文章!

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