如何在 javascript 中获取 <input type="image" ... > 中引用的图像的自然大小答案

【问题标题】：How to get natural size of an image referenced in <input type="image" ... > in javascript如何在 javascript 中获取 <input type="image" ... > 中引用的图像的自然大小
【发布时间】：2012-10-29 11:58:04
【问题描述】：

我的网页上有一个"image" 类型的input。我想获取该原始图像的尺寸（不是 DOM 元素）。用javascript怎么做？

我知道的唯一解决方案是获取src 属性的值，手动加载图像并按照here 的描述获取其大小。但我知道图像已经加载，因为它显示在页面上。

【问题讨论】：

标签： javascript html image input

【解决方案1】：

一旦<input type="image" 上没有其他样式，您可以使用clientWidth/clientHeight 与img 标签相同（默认情况下，按钮将具有与src 图像相同的宽度/高度）。不幸的是，没有一个浏览器支持naturalWidth/naturalHeight 输入图像类型。 Demo

同时 - 我认为使用额外的 img 元素来获取图像的宽度/高度没有什么大问题。在大多数情况下，图像将从缓存中获取。

【讨论】：

那么在JS中动态创建Image呢？在这种情况下会从缓存中取出吗？
坦率地说，我以为我们在谈论动态创建的Image）。一般来说 - 没有区别。一旦加载到客户端，下次需要时将从缓存中取出。不管它是如何添加到页面上的。 CSS sprites 基于此。当然，这取决于缓存设置，但通常可以正常工作。