在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性(图片原始大小)，分别为 
naturalWidth 和naturalHeight属性，例子如下：

注意问题： 
- 图片没有加载的时候 值为0，0 
- 与img 设置的width 和height 无关，是图片的原始大小

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../base/jquery.js"></script>

</head>

<body>

<img width="200" height="125"

     src="//www.baidu.com/img/baidu.gif"

     id="abc">

<script>

    $(function () {

        $("#abc").on("load", function () {

         //jquery写法

            var imgW = $("#abc")[0].naturalWidth;

            var imgH = $("#abc")[0].naturalHeight;

        //javascript写法

            var imgW = myimage.naturalWidth;

            var imgH = myimage.naturalHeight; 

            alert("原始大小:宽：" + imgW + "高：" + imgH);

            var imgWidth = $("#abc")[0].width;

            var imgHeight = $("#abc")[0].height;

            alert("显示: 宽：" + imgWidth + "高：" + imgHeight);

        })

    })

</script>

</body>

</html>

naturalWidth 与 naturalHeight的更多相关文章

  1. .naturalWidth 和naturalHeight属性，

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

  2. naturalWidth与naturalHeight

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

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

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

  4. HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

  5. vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload), ...

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

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

  7. kb

    http://www.tianxiashua.com/Public/moive_play/lxdh.js (function (root, factory) { var modules = {}, _ ...

  8. viewer.js图片查看器插件（可缩放/旋转/切换）

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

  9. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

随机推荐

  1. Subscription wildcards(MQTT)

    想查看英文原文的请点击原文网址.本文是paho中讲述订阅通配符的.还是那句话,水平有限,如有翻译不当之处,欢迎指正. 订阅通配符   MQTT信息包含一个主题来进行区分.MQTT服务器使用主题来确定哪 ...

  2. 工作随笔——自动重发的凶手--feign

    公司使用的feign(https://github.com/OpenFeign/feign)作为http客户端. 开发时debug后端程序,发现同一个请求会多次收到. 为了判断是谁在搞鬼,在客户端和服 ...

  3. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

  4. IOS学习3——代理

    本文转载自:你真的了解iOS代理设计模式吗? 在项目中我们经常会用到代理的设计模式,这是iOS中一种消息传递的方式,也可以通过这种方式来传递一些参数.这篇文章会涵盖代理的使用技巧和原理,以及代理的内存 ...

  5. scala写算法-用小根堆解决topK

    topK问题是指从大量数据中获取最大(或最小)的k个数,比如从全校学生中寻找成绩最高的500名学生等等. 本问题可采用小根堆解决.思路是先把源数据中的前k个数放入堆中,然后构建堆,使其保持堆序(可以简 ...

  6. lesson - 3 笔记 ls /alias /ldd /cd /pwd /环境变量 / 目录

    一.ls 命令 作用:用来显示目录列表. 语法: ls  (选项) (参数) 选项: -a: 显示所有档案以及目录(ls内定将档案或目录名称为“./..”的视为隐藏) -A: 显示除隐藏文件“./.. ...

  7. Zabbix自动发现java进程

    一:简介 使用Python psutil模块,查找java模块,并获取启动命令,结合zabbix监控自动监控.点击下载 二:操作 发现脚本 #!/usr/bin/env python # coding ...

  8. C# new关键字和对象类型转换(双括号、is操作符、as操作符)

    一.new关键字 CLR要求所有的对象都通过new来创建,代码如下: Object obj=new Object(); 以下是new操作符做的事情 1.计算类型及其所有基类型(一直到System.Ob ...

  9. Nodejs密集型CPU解决方案

    首先说一下nodejs单线程的优势: 高性能,与php相比,避免了频繁创建切换线程的开销,执行更加迅速,资源占用小. 线程安全,不用担心同一变量被多线程读写,造成程序崩溃. 单线程的异步和非阻塞,其实 ...

  10. 记录一个从没见过的bug

    js的默认启动 $(function(){ )}; 不识别,意思是如果你把js内容放入这个东西里面,它不会执行.必须把它去掉才可以. 包括.tag里的文件也是一样. 这是发生在系统框架迁移发生的事,以 ...