在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为
.naturalWidth 和naturalHeight属性,例子如下:

var rw = myimage.naturalWidth; // 真实图片宽度

var rh = myimage.naturalHeight; //真是图片高度

但有个前提是,必须在图片完全下载到客户端浏览器才能判断,

,目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的,

如果是不支持的版本浏览器,那可以用传统方法判断,如下:

var myimage = document.getElementById("myimage");

if (typeof myimage.naturalWidth == "undefined") {

// IE 6/7/8

var i = new Image();

i.src = myimage.src;

var rw = i.width;

var rh = i.height;

}

else {

// HTML5 browsers

var rw = myimage.naturalWidth;

var rh = myimage.naturalHeight;

}

.naturalWidth 和naturalHeight属性,的更多相关文章

  1. naturalWidth 与 naturalHeight

    在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性(图片原始大小),分别为 naturalWidth 和naturalHeight属性,例子如下: 注意问题: - 图片没有加载的时候 值为0 ...

  2. naturalWidth与naturalHeight

    naturalWidth与naturalHeight是HTML5的新属性, 可与通过这两个属性来直接获取图片的原始宽度和高度, 现在在火狐, 谷歌, IE11均已经实现 可以看看naturalWidt ...

  3. naturalWidth、naturalHeight来获取图片的真实宽高

    一般在图片放大缩小,或动态插入图片时使用 function imagea(img){ var w = img.naturalWidth; var h = img.naturalHeight; } 注: ...

  4. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  5. JQuery Mobile - 处理图片加载失败!

    重点来了:一定要记住error事件不冒泡(如果要用js的方法替换默认出错图片,记得把img的alt属性去掉). 相关的知识点:jquery的ready方法.$("img").err ...

  6. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  7. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  8. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  9. viewer.js图片查看器插件(可缩放/旋转/切换)

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  2. 李洪强iOS经典面试题下

    李洪强iOS经典面试题下 21. 下面的代码输出什么? @implementation Son : Father - (id)init { self = [super init]; if (self) ...

  3. iOS开发中几个重要的方法

    iOS开发中几个重要的方法: 加载类到内存,程序刚启动的时候调用,调用在main函数之前 1.+(void)load{ } 初始化类,类第一次使用的时候调用一次 2.+(void)initialize ...

  4. error while loading shared libraries: libXXX.so.x: cannot open shared object file: No such file or directory .

    转载:http://www.eefocus.com/pengwr/blog/2012-02/235057_baf52.html 此时你可以locate libXXX.so.x 一下,查看系统里是否有该 ...

  5. 4Sum

    Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...

  6. spring security使用数据库资源

    国内对权限系统的基本要求是将用户权限和被保护资源都放在数据库里进行管理,在这点上Spring Security并没有给出官方的解决方案,为此我们需要对Spring Security进行扩展.. 数据库 ...

  7. VMware+Fedora20+secureCRT7.0配置心得

    VMware10 XX版 下载地址 secureCRT7 XX版 下载地址 做好安装等准备工作,打开Fedora虚拟机: 首先.安装openssh-server yum install openssh ...

  8. php一些特殊函数的使用实例详解

    <?php /* * PHP Array 函数大全 * * array() 创建数组. 3 array_change_key_case() 返回其键均为大写或小写的数组. 4 array_chu ...

  9. eclipse工程加入jquery.min.js报错:missing semicolon

    1,注释修改项目目录下的.project文件 <?xml version="1.0" encoding="UTF-8"?> <projectD ...

  10. 20145209&20145309信息安全系统设计基础实验报告 (4)

    实验步骤 阅读和理解源代码 demo_read,demo_write 函数完成驱动的读写接口功能,do_write 函数实现将用户写入的数据逆序排列,通过读取函数读取转换后的数据.这里只是演示接口的实 ...