在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. 李洪强iOS经典面试题137-内存管理

      内存管理 ARC处理原理 ARC是Objective-C编译器的特性,而不是运行时特性或者垃圾回收机制,ARC所做的只不过是在代码编译时为你自动在合适的位置插入release或autoreleas ...

  2. java-两个大数相加

    题目要求:用字符串模拟两个大数相加. 一.使用BigInteger类.BigDecimal类 public static void main(String[] args) { String a=&qu ...

  3. Daily Scrum 11.5

    今天成员全部到齐,对今天的工作进行了总结,并对明天的工作作了安排.由于先前分配的任务都已基本完成,要完成程序的三级优化是较为艰巨的任务.所以我们讨论决定,除PM外其他成员都投入到程序的优化和改进中去. ...

  4. c#中的math类

    http://wenku.baidu.com/link?url=TliiVtdB8IeO3wiM9mVSD-3wLZcLum7dsXlEZgSKawo6x-qvE_G3VL_yDa3ZQ_9ZFlGG ...

  5. 谷歌浏览器安装adblock广告屏蔽插件

    访问不到google的应用商店的话,就从网上直接查找adblock for chrome.打开浏览器的开发者模式,下载解压后直接拖拽到浏览器即可.下载地址http://www.cr173.com/so ...

  6. jquery ajax传递多个对象或数组到后台

    1.js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化. 2.Jquery   $.ajax方法的配置 针对$.ajax方法的配置参数需要进行修改: 1) ...

  7. Spring中的单例一二

    Spring框架很好的帮助我们创建和管理dao.bean.service.action等对象, 但是它创建的对象是单例呢还是多例,又有哪些区别以及为什么 1.在Spring中默认创建的是单例模式,简单 ...

  8. bug0

    1,编码 之前做支付验证的时候,sdk的平台token串有的就是会有空格,折腾了很久,前后端对调好多次都没发现这个问题.结果有的平台验证通过,有的通不过. 仔细调试后发现不通过的url中参数串都是带有 ...

  9. result结果集

    结果集(ResultSet)是数据中查询结果返回的一种对象,可以说结果集是一个存储查询结果的对象,但是结果集并不仅仅具有存储的功能,他同时还具有操纵数据的功能,可能完成对数据的更新等. 结果集读取数据 ...

  10. HTML-embed标签详解

    Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Netscape及新版的IE 都支持 ...