在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. passing ‘const ’ as ‘this’ argument of ‘’ discards qualifiers 错误处理

    示例程序: #include <iostream> #include <set> using   namespace std ; class   StudentT { publ ...

  2. Odoo 9 Odoo $ JQuery undifned

    浏览器处于假死状态,查看console发现 odoo,jquery,$ 未定义三处错误,后台显示IOError: IOError: [Errno 2] No such file or director ...

  3. vsphere平台为win系统动态扩展磁盘

    1.关闭win虚拟机 2.在vcenter管理中加大磁盘空间 3.开启win虚拟机(此时磁盘并没有加大) 4.打开cmd命令行: 进入分区管理--->查看磁盘--->选择磁盘---> ...

  4. java动态编译类文件并加载到内存中

    如果你想在动态编译并加载了class后,能够用hibernate的数据访问接口以面向对象的方式来操作该class类,请参考这篇博文-http://www.cnblogs.com/anai/p/4270 ...

  5. .NET 页面间传值的几种方法

    1. QueryString 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的数值. 传递: location.href="W ...

  6. 【iCore3 双核心板_FPGA】例程三:GPIO输入实验——识别按键输入

    实验指导书及代码包下载: http://pan.baidu.com/s/1dEaDr37 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  7. 【7集iCore3基础视频】7-2 iCore3原理图介绍

    iCore3原理图介绍: 高清源视频:http://pan.baidu.com/s/1hsPkifM 密码:ei8ciCore3 购买链接:https://item.taobao.com/item.h ...

  8. 服务器(Liunx)打包发布java web工程

    Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...

  9. vmware centos6.5 net 配置

    使用NAT模式 虚拟机网络连接使用NAT模式,物理机网络连接使用Vmnet8. 虚拟机设置里面——网络适配器,网络连接选择NAT模式. 虚拟机菜单栏—编辑—虚拟网络编辑器,选择Vmnet8 NAT模式 ...

  10. 文件上传去除"Content-Disposition: form-data"

    某个项目中为了统一处理文件上传业务,创建了一个FileUpload Handle,由于上传客户端用到各种技术,当时为了方便断点续传,就直接接收请求中的文件内容(可能是分片),所以处理的不是规范的htt ...