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