naturalWidth与naturalHeight获取图片原始大小

标签: naturalWidth naturalHeight 图片尺寸 图片原始尺寸
4人阅读 评论(0) 收藏 举报
分类:

    naturalWidth与naturalHeight属性是在html5权威指南上发现的,这二者属性获得的是图片原始的尺寸不会因外部width和height属性设置的改变而改变

示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img id="image" src="2.png" style="display:block;" width="100" height="100" />
		<script>
			window.onload = function(){
				var image = document.getElementById("image");
				console.log("原始宽度:"+image.naturalWidth);
				console.log("原始高度:"+image.naturalHeight);
				console.log("宽:"+image.width);
				console.log("高:"+image.height);
			}
		</script>
	</body>
</html>

运行结果:

我们可以看到,这个原始宽高,不受设置的影响。

需要注意的是:

图片必须提前加载,否则,图片原始宽高均为0,如下图



查看评论

Python爬虫视频课程:中国女性胸部大小分析

本课程使用Python3作为编程语言,通过Python爬虫技术从天猫和京东抓取了近20000条胸罩销售数据来分析中国女性胸部大小的分布情况,这些数据将会下载到本地的SQLite数据库中,然后进行数据清理。接下来会使用Python语言中非常流行的Pandas和Matplot库对数据进行分析和可视化
  • 2017年12月12日 13:55

naturalWidth 与 naturalHeight 取得图片原始大小

注意问题: - 图片没有加载的时候 值为0,0 - 与img 设置的width 和height 无关,是图片的原始大小 ...
  • ISaiSai
  • ISaiSai
  • 2016-09-08 09:07:48
  • 2234

html5 中新的naturalWidth和naturalHeight属性

在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为 .naturalWidth 和naturalHeight属性,例子如下: var rw = myimage.natural...
  • leiwuxing
  • leiwuxing
  • 2015-10-13 18:15:46
  • 786

JS获取图片的原始尺寸和上传图片大小

JS获取图片的原始尺寸一、html5 中新的naturalWidth和naturalHeight属性在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为naturalWidth 和 n...
  • x550392236
  • x550392236
  • 2017-12-05 18:14:46
  • 347

js获取img的原始高宽

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。改造下获...
  • jimmyhandy
  • jimmyhandy
  • 2015-09-22 14:54:43
  • 3439

jquery获得图片的原始尺寸

Get on screen image var screenImage = $("#image"); // Create new offscreen image to test var theIma...
  • forest_fire
  • forest_fire
  • 2016-03-21 11:13:39
  • 2785

获取图片文件原始大小的API函数

//====================================================================// 函数: of_getpicturesize()//--...
  • lzp_lrp
  • lzp_lrp
  • 2004-12-09 19:40:00
  • 3164

jquery 获取图片真实大小的两种方法

第一种: $("") // Make in memory copy of image to avoid css issues     .attr("src", $(''#imgid").a...
  • coolpan123
  • coolpan123
  • 2016-01-11 10:09:06
  • 1943

Flex中取得Image图像原始大小

我觉得用ChangeWatcher也很简单,适用于Embed引入的图片例如: var cw:ChangeWatcher = ChangeWatcher.watch(img, "width", C...
  • baixiaozhe
  • baixiaozhe
  • 2012-12-06 10:03:15
  • 796

jquery获取图片原始尺寸 (高度与宽度)示例

例 代码如下复制代码var pic_real_width, pic_real_height; $("") // Make in memory copy of image to avoid css is...
  • forest_fire
  • forest_fire
  • 2016-03-21 11:13:41
  • 3649
    个人资料
    持之以恒
    等级:
    访问量: 149
    积分: 72
    排名: 153万+
    文章存档