在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. Daily Scrum 10.27

    今天是星期天,但大家都没有放松,还是抽出了一定的时间来完成任务.可以感觉出来在编译作业的压力下大家的热情不是很高涨,希望大家坚持下去. 下面是今天的Task统计: 下面是所有迭代的状态:

  2. SQL server while语句、存储过程

    1.循环语句 2.存储过程 存储过程(stored procedure)有时也称为sproc.存储过程存储于数据库中而不是在单独的文件中,有输入参数.输出参数以及返回值等. 3.四种存储过程类型(类似 ...

  3. DOS中cmd里常见的命令

    我们使用计算机接触最频繁的就是DOS.DOS是英文Disk Operating System的缩写,意思是“磁盘操作系统”,顾名思义,DOS主要是一种面向磁盘的系统软件,说得简单些,DOS就是人给机器 ...

  4. c语言.大数的输出

    转化成字符串,再用for循环输出: #include <stdio.h>#include <string.h>int main(){  char s[32];   int d, ...

  5. level分层次输出内容添加leve

    代码如下:function getSubComments($parent = 0, $level = 0) { $db = &JFactory::getDBO(); $sql = " ...

  6. Shell编程中括号判断中赋值语句和判断语句

    #!/bin/bash declare var="xxx" # without space and use one = #1.judge whether the assignmen ...

  7. Ceph与OpenStack的Glance相结合

    http://docs.ceph.com/docs/master/rbd/rbd-openstack/?highlight=nova#kilo 在Ceoh的admin-node上进行如下操作: 1. ...

  8. ionic 运用pouchdb/sqlite 数据库做本地存储

    配置数据库环境需要3步: 1.安装slqite插件 在ionic 工程目录对应终端执行一下命令: npm install cordova-plugin-sqlite 2.安装pouchdb 在ioni ...

  9. Educational Codeforces Round 16 A B C E

    做题太久也有点累了..难题不愿做 水题不愿敲..床上一躺一下午..离下一场div2还有点时间 正好有edu的不计分场 就做了一下玩玩了 D是个数学题 F是个AC自动机 都没看明白 留待以后补 A 给出 ...

  10. Thinking in Java——笔记(4)

    Controlling Execution true and false Java doesn't allow you to use a number as a boolean. If you wan ...