如何用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.
    });

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

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

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

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

时间: 2024-08-03 19:33:06

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

JavaScript获取图片的原始尺寸

页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 1 2 3 4 5 <img src=" http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"> <script> var img = document.getElementsByTagName('img')[0] var width =

JS获取图片的原始尺寸

一.html5 中新的naturalWidth和naturalHeight属性 在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为naturalWidth 和 naturalHeight属性, 例子如下: var rw = myimage.naturalWidth; // 真实图片宽度 var rh = myimage.naturalHeight; //真实图片高度 前提是:必须在图片完全下载到客户端浏览器才能判断,目前在ie 9,Firefox, Chrome, Safari

jq获取图片的原始尺寸,自适应布局

原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(),$("img").height() 是无法稳定获取到img的准确尺寸,或为0,或偶尔为0: 解决方法: load(),元素加载完了之后执行: 代码如下: <!DOCTYPE html> <html lang="en"> <head>

转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img =

JavaScript 在浏览器端使用

JavaScript 在浏览器端使用 提个醒儿:如果你已经使用过 JS,请忽略本文吧~~ 在浏览器端使用 JS 的方法其实就是通过 script 标签实现的,这个元素是由 Netscape 创造的,当初他们也面临着如何在HTML中使用 JS 的问题,经过一系列的尝试和纠错,最终决定为WEB增加对脚本的支持.<script>定义了以下6个属性: async  可选属性, 使用过ES6语法的都知道这是异步的意思,在这里也正如此,立即下载脚本,但不应妨碍页面中的其他操作,需要注意的是,该属性只对外部

[转]js动态获取图片长宽尺寸

http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img = ne

Javascript获取页面、屏幕尺寸大小参数

Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.

JavaScript获取页面、屏幕尺寸大小

转载:http://www.cnblogs.com/rushoooooo/archive/2011/05/01/2033670.html Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHei

获取图片的原始高度

var _w = parseInt($(window).width());//获取浏览器的宽度$(".new_mess_c img").each(function(i){var img = $(this);var realWidth;//真实的宽度var realHeight;//真实的高度//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!$("<img/>"