如何用JavaScript获取图片的真实尺寸大小

标签: 技术技巧 javascript 图片 | 发表时间:2014-09-22 01:50 | 作者:歪脖骇客
出处:http://www.webhek.com

网页页面上的图片尺寸似乎都千篇一律。我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调。之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥。

比如, 冷知识:你知道每个视窗都有的 [x] 是怎么来的吗?这篇文章中,很多图片超出了文本宽度的限制,给人一种参差错落的感觉,同时,让大图片以其真实的尺寸展示,给人以更震撼的感觉。

但从技术上,我们可以轻松的用文本的最大宽度限制图片,让它们都保持一个宽度,而不按文本的宽度时,我们就需要每个图片的自己的尺寸。我们可以在服务端编辑时声明图片的原始尺寸。而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸,动态改变图片的显示大小。这样即能兼容老的也文本最大宽度的方式,还可以在需要的时候让图片呈现出其原始的大小。

如何用JavaScript在浏览器端获取图片的原始尺寸大小?

var img = $("#img_id"); // 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.
    });

Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以,你不能使用timeout函数延时等待,最好的方法是使用图片的onload事件。

为了避免CSS对图片大小尺寸的影响,上面的代码将图片拷贝到内存中进行计算。

如果你的页面是老式页面,你可以按需把这段代码嵌入页面底部,它不需要你修改原有页面。

参考 stackoverflow

相关 [javascript 图片 真实] 推荐:

如何用JavaScript获取图片的真实尺寸大小

- - Web骇客
网页页面上的图片尺寸似乎都千篇一律. 我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调. 之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制. 但随着现代浏览器(火狐/谷歌/IE11)的普及,浏览器对页面设计的限制越来越少,Web程序员的想象能力能够得到极大的发挥.

javascript图片切换

- Haipeng - 博客园-首页原创精华区
闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之. 1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸.

JavaScript解析:让搜索引擎看到更真实的网页

- - 搜索研发部官方博客
长期以来,站长们选择使用JavaScript来实现网页的动态行为,这样做的原因是多种多样的,如加快页面的响应速度、降低网站流量、隐藏链接或者嵌入广告等. 由于早期的搜索引擎没有相应的处理能力,导致在索引这类网页上往往出现问题,可能无法收录有价值的资源,也可能出现作弊. 引入JavaScript解析的目的,正是为了解决上述两方面的问题,其结果也就是使搜索引擎可以更为清晰的了解用户实际打开该网页时看到的效果.

JavaScript图片预加载应该注意的几点

- - 可咔酷 | 网络杂货铺
下面的代码是前段时间无聊的时候在论坛闲逛看到的一篇关于图片预加载的文章,其实写的不错,代码如下:. 在网上搜索了一下相关文章,大体上都是这个思路. 这个方法功能是ok的,但是有一些隐患. 1 创建了一个临时匿名函数来作为图片的onload事件处理函数,形成了闭包. 相信大家都看到过ie下的内存泄漏模式的文章,其中有一个模式就是循环引用,而闭包就有保存外部运行环境的能力(依赖于作用域链的实现),所以img.onload这个函数内部又保存了对img的引用,这样就形成了循环引用,导致内存泄漏.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

用JavaScript将Canvas内容转化成图片的方法

- - WebHek
上周我们花了半天时间开发下一个准备放进Mozilla Marketplace的应用. 有一个应用现在非常的火热,那就是Instagram,Facebook花了100万美元收购了它. 我们也想有100万美元装到口袋里,我决定开发一个Instagram风格的应用,这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片格式.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex&#39;s Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.