js获取图片原始大小

摘要:

  浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式

<img src="IE.png" style="width:25px;height:25px;">

  这样在浏览器中显示的大小就是25px。那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     </head>
 6     <body>
 7         <img src="IE.png" id="image" style="width:25px;height:25px;">
 8         <script>
 9             // 设置延时保证图片加载完成
10             setTimeout(function() {
11                 var
12                 real_width,
13                 real_height,
14                 _im         = document.getElementById(‘image‘),
15                 im          = document.createElement(‘img‘);
16                 im.src      = _im.src,
17                 real_width  = im.width,
18                 real_height = im.height;
19                 alert(real_width+‘\n‘+real_height);
20             },500);
21         </script>
22     </body>
23 </html>

注意:上面代码本人在IE7+和chrome上都测试过了,因为没有装IE6,所以没法测试。

时间: 2024-08-24 16:41:33

js获取图片原始大小的相关文章

Js获取图片原始宽高

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

js获取图片原始尺寸

如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src="images/test.jpg" id="oImg" alt=""> HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高.这两个属性在Firefox/Chrome/Safari/

JS获取图片的缩略图,并且动态的加载多张图片

找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js获取缩略图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <st

BitmapFactory.Options详解 怎样获取图片的大小 遇到大一些的图片,遇到OOM(Out Of Memory)的问题

下面我们回到我们的主题上来:怎样获取图片的大小? 思路很简单: 首先我们把这个图片转成Bitmap,然后再利用Bitmap的getWidth()和getHeight()方法就可以取到图片的宽高了. 新问题又来了,在通过BitmapFactory.decodeFile(Stringpath)方法将突破转成Bitmap时,遇到大一些的图片,我们经常会遇到OOM(Out Of Memory)的问题.怎么避免它呢? 这就用到了我们上面提到的BitmapFactory.Options这个类. Bitmap

Android获取图片实际大小兼容平板电脑

项目中有个图片在平板电脑中显示特别小的原因,一直苦于没找到原因,也没有平板电脑测试,今天找了个修改分辨率的,编写相关方法终于处理了,记录下比较: 好让以后不造轮子. 主要是获取文章相关图片显示问题,直接用getIntrinsicWidth()方法获取,getIntrinsicWidth()获取的并非图片的实际宽度,在手机看还过得去,不会相差太远,但在平板电脑看, 它简直就是一个小女孩,太害羞了,以至于显示那么小. 回到正题: 解决方法: 1.获取手机分辨率 用该分辨率乘以其密度 if (file

(转)JS获取当前对象大小以及屏幕分辨率等

原文 JS获取当前对象大小以及屏幕分辨率等 <script type="text/javascript">function getInfo(){      var s = "";         s += " 网页可见区域宽:"+ document.body.clientWidth+"\n";          s += " 网页可见区域高:"+ document.body.clientHeig

js 获取图片宽高 和 图片大小

获取要查看大小的img varimg_url = 'http://img5.imgtn.bdimg.com/it/u=4267222417,1017407570&fm=200&gp=0.jpg'   // 创建img对象 var img = new Image();   // 改变图片的src img.src = img_url;   // 加载完成执行 img.onload = function(){   // 打印   alert('width:'+img.width+',height

JS修改图片的大小

注:利用js是不能修改图片的实际大小的,修改的只是图片在标签中对应的width,height属性. 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经设置过style属性),p.style.width='200px'(切记:此处是字符串,格式一定是:???px,不能只写个数字,否则在有的浏览器上图片的大小是不会改变的) 以下代码实现了每次点击按钮可以实现图片变大或缩小一点:

imagick获取图片的大小bug

<? php /* imagick的获取图片的高度和宽度函数有问题,使用GD函数可获得正确结果 gd函数 array getimagesize ( string $filename [, array &$imageinfo ] ) getimagesize() 函数将測定不论什么 GIF,JPG,PNG,SWF.SWC.PSD.TIFF,BMP,IFF.JP2,JPX.JB2.JPC,XBM 或 WBMP 图像文件的大小并返回图像的尺寸以及文件类型和一个能够用于普通 HTML 文件里 IMG