在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. 利用grep-console插件使Intellij idea显示多颜色调试日志

    由于Intellij idea不支持显示ascii颜色,grep-console插件能很好的解决这个问题,下面就以开发JavaEE项目中,结合Log4j配置多颜色日志输出功能. 安装grep-cons ...

  2. Web前端开发好学吗？谈谈一位学姐的前端工程师之路

    我的第一篇博客....... 我是一名工科女,因高考失利与理想的院校擦肩而过,从而选择了机电专业.毕业后找工作时才发现机电专业的工作并不太适合我.我的父母也支持我转专业求职,但这个过程有时会让我迷茫. ...

  3. 用Inferno代替React开发高性能响应式WEB应用

    什么是Inferno Inferno可以看做是React的另一个精简.高性能实现.它的使用方式跟React基本相同,无论是JSX语法.组件的建立.组件的生命周期,还是与Redux或Mobx的配合.路由 ...

  4. 【转】Android开发之数据库SQL

    android中的应用开发很难避免不去使用数据库,这次就和大家聊聊android中的数据库操作. 一.android内的数据库的基础知识介绍 1.用了什么数据库 android中采用的数据库是SQLi ...

  5. EclipseIDE设置

    对于新安装的Eclipse而言要设置: 1.Window-Preferences-General-Workspace,然后分别设置Text file encoding为UTF-8和设置New text ...

  6. MySQL datetime的更新，删除网上的一些老概念

    网上的老概念 第一点:是以前的MySQL的datetime的最小值是:'1000-01-01 00:00:00'(貌似),但是最新的MySQL测试datetime的最小值可以是:'0000-00-00 ...

  7. qt关键字高亮

    qt的高亮显示主要是使用qsyntaxhighlighter类,由于qsyntaxhighlighter是抽象基类,所以需要继承并自己实现 //头文件 #ifndef MARKDOWN_HIGHLIG ...

  8. 【bzoj3809】Gty的二逼妹子序列

    Description Autumn和Bakser又在研究Gty的妹子序列了!但他们遇到了一个难题. 对于一段妹子们,他们想让你帮忙求出这之内美丽度∈[a,b]的妹子的美丽度的种类数. 为了方便,我们 ...

  9. bzoj 3932: [CQOI2015]任务查询系统

    Description 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si ...

  10. 《Create Your own PHP Framework》笔记

    前言 大力推荐该教程:<Create Your own PHP Framework> Symfony的学习蛮累的,官方文档虽然很丰富,但是组织方式像参考书而不是指南,一些不错的指导性文档常 ...