在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. IntelliJ IDEA 环境常用设置整理

    1.修改为Eclipse快捷键 File -> Settings -> Keymap => Keymaps改为 Eclipse copy   2.显示行号: File -> S ...

  2. 51、css初识

    前端内容就分三部分html.css.javascript(js),对一个网页来说html相当于是一个裸体的人,css相当于给这个人穿上了衣服,javascript相当于给这个人赋予动作行为,今天我们要 ...

  3. 通过 Sublime Package Control 安装插件后不能用的解决办法

    最近使用 Sublime 写 SASS 的时候需要使用高亮功能,通过 Package Control 安装了相关插件,但是安装之后没有反应,再次打开 Package Control 的时候,已经搜索不 ...

  4. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  5. 程序员的自我救赎---1.4.1：核心框架讲解(DAL)

    <前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...

  6. bat常用命令

    1.@它的作用是隐藏它后面这一行的命令本身(只能影响当前行).2.echo中文为"反馈"."回显"的意思.它其实是一个开关命令,就是说它只有两种状态:打开和关闭 ...

  7. sourcetree跳过注册的方法

    当前只有Win的版本,Mac自行百度(笑) 很多人用git命令行不熟练,那么可以尝试使用sourcetree进行操作. 然鹅~~sourcetree又一个比较严肃的问题就是,很多人不会跳过注册或者操作 ...

  8. Ajax 的用法

    1.什么是 Ajax? Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML.它不是一门新的语言,而是一种使用现有标准的新方 ...

  9. 【ASP.NET Core】运行原理(4):授权

    本系列将分析ASP.NET Core运行原理 [ASP.NET Core]运行原理(1):创建WebHost [ASP.NET Core]运行原理(2):启动WebHost [ASP.NET Core ...

  10. ffempg支持文件解码

    在做一个数据通道 要求有两个 1.支持打开实时流,解码得到图片 2.支持打开视频文件,得到解码图片 第一个要求前任已经实现 bool FfmpegStreamChr::Open(const char ...