在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. 记录maven的一些命令

    为了方便后面找资料更快,记录下(不定期更新): maven官网:http://maven.apache.org/plugins/ mvn package打包 mvn package -DskipTes ...

  2. canvas 从初级到XX 2# 让我们在之前的基础之上，再迈进一步吧 [中级向] （上）

    还是老样子,先啰嗦一点前言. 最近各种事务缠身,所以也就隔了比较长的时间才开始码这篇文.希望不会这么快就过气. 好了,接下来就开始码代码.(写到中途,突然感觉到的.本篇设计大量初中物理知识,请怀念的往 ...

  3. iOS APP之间到跳转，以及热门应用，手机自带到应用跳转

    应用之间的跳转 在第一个APP中,做如下操作:1.在info.plist文件中的"信息属性列表"下添加一项:"URL类型"; 2.点开"URL类型&q ...

  4. Docker Stack 集群部属服务

    Docker越来越成熟,功能也越来越强大.使用Dokcer Stack做服务集群也是非常的方便,docker 自己就提供了负载功能,感觉很方便,就想给大家分享一下,做一个简单的教程. 环境 我是用了两 ...

  5. ElasticSearch 学习记录之如任何设计可扩容的索引结构

    扩容设计 扩容的单元 一个分片即一个 Lucene 索引 ,一个 Elasticsearch 索引即一系列分片的集合 一个分片即为 扩容的单元 . 一个最小的索引拥有一个分片. 一个只有一个分片的索引 ...

  6. docker：（1）docker基本命令使用及发布镜像

    docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...

  7. oracle 处理时间和金额大小写的相关函数集合

    CREATE OR REPLACE FUNCTION MONEY_TO_CHINESE(MONEY IN VARCHAR2) RETURN VARCHAR2 IS C_MONEY ); M_STRIN ...

  8. vue2.0 正确理解Vue.nextTick()的用途

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...

  9. 使用git工具将项目上传到github

    注册github账号 https://github.com/ 安装git工具: https://git-for-windows.github.io/ 上面的准备工作完成后,现在开始操作. 一.进入gi ...

  10. 基于IndexedDB实现简单文件系统

    现在的indexedDB已经有几个成熟的库了,比如西面这几个,任何一个都是非常出色的. 用别人的东西好处是上手快,看文档就好,要是文档不太好,那就有点尴尬了. dexie.js :A Minimali ...