naturalWidth与naturalHeight获取图片原始大小

最新推荐文章于 2024-04-22 17:12:32 发布
最新推荐文章于 2024-04-22 17:12:32 发布
阅读量4.3k 收藏
点赞数 1
分类专栏： html5 文章标签： naturalWidth naturalHeight 图片尺寸 图片原始尺寸
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a18792627168/article/details/79964258
版权

    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，如下图



DOM曼珠沙华
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取图片原始大小：NaturalWidth and NaturalHeight
樊小书生
06-14 6127
本文转自：https://www.w3ctech.com/topic/112 现代浏览器中获取实际宽度和高度 现代浏览器(包括IE9)为IMG元素提供了naturalWidth和naturalHeight属性来获取实际宽度与高度 ，代码如下： var nWidth = document.getElementById('example').naturalWidth, nHeigh...
图片的分辨率大于设备分辨率或者小于设备的分辨率的显示问题
zaizai2154365的博客
05-27 9127
做程序开发，尤其是手机app开发，经常接触到图片的处理，有时服务器获取的图片大于自己本地要显示的大小（自己限制的），有时要小于，但是设备怎么显示我一直有个疑问，那就是如果图片的分辨率大于设备的分辨率而且还要满屏显示的话的问题。          今天在网上找了下相关的知识总结下： 显示器的分辨率是指显示器的屏幕的像素组成的数量（指液晶显示器），如21.5英寸的显示器的分辨率是1920X
js中用来获取图片的实际尺寸的naturalWidth和 naturalHeight使用记录
最新发布
qwguo
04-22 319
是 HTMLImageElement 对象的属性，用于获取或设置图像的原始尺寸。这些属性在处理图像时非常有用，尤其是在需要知道图像的物理尺寸而不仅仅是在页面上呈现的尺寸时。属性，你可以更准确地处理图像数据，尤其是在需要知道图像的物理尺寸时，这些属性提供了重要的信息。
笔记:naturalWidth和naturalHeight
popstarqq的博客
12-01 224
naturalWidth和naturalHeight是html5新增的属性，它们可以直接获取图片的原始宽高; 应用场景: 如果给图片添加了width样式，那么用innerWidth获得的宽度就不是你想要的，因为innerWidth获取的是元素盒模型的实际渲染的宽度，而不是图片的原始宽度 ...
html5中width的作用,html5中新属性naturalWidth/naturalHeight的用法
weixin_35741582的博客
06-19 667
简介naturalWidth和naturalHeight是html5新增的属性，它们可以直接获取图片的原始宽高。而且这在Fixefox/Chrome/Safari/Opera/IE9里已经实现。看看naturalWidth和naturalHeight在各大浏览器中兼容性如下：原因页面中的img元素想要获取图片的原始尺寸通常使用innerWidths属性或者使用jQuery的width()方法，但是...
naturalWidth 与 width 的区别
lio-zero 的博客
11-23 384
naturalWidth 是元素的自然宽度，它永远不会改变。例如，即使使用 CSS 或 JavaScript 调整图像大小，100px 宽的图像的自然宽度始终为 100px。 而 width 是 width 属性的值。它可能会发生更改，并且可以通过 CSS 或 JavaScript 进行更新。 我们可以通过给定 url 加载的图像的获取自然宽度： const getNaturalWidth = u...
JavaScript简单获取页面图片原始尺寸的方法
10-22
在网页开发中，有时我们需要获取页面中图片的原始尺寸，比如在实现响应式布局或动态调整图片大小时。JavaScript提供了一种简单的方式，通过`Image`对象来获取图片的宽度和高度，即使图片还未在页面上显示。这种方法...
JavaScript获取图片的原始尺寸以宽度为例
10-25
在JavaScript中，获取图片的原始尺寸，特别是宽度，是一个常见的需求。...通过使用`naturalWidth`和`naturalHeight`属性，以及在旧版IE中利用`Image`对象和`onload`事件，可以确保在各种情况下正确获取图片的原始尺寸。
Javascript获取图片原始宽度和高度的方法详解
10-21
在JavaScript中，获取图片的原始尺寸是一个常见的需求，特别是在动态调整图片大小或处理图像显示时。本文将深入探讨如何有效地获取图片的原始宽度和高度，同时提供兼容不同浏览器的解决方案。 首先，我们通常会尝试...
javascript 获取图片尺寸及放大图片
10-26
需要注意的是，虽然可以使用`naturalWidth`和`naturalHeight`来获取原始尺寸，但不能直接设置这两个属性来改变图片大小，只能用于计算。 总之，通过JavaScript可以轻松地获取和处理图片的尺寸。在不同浏览器中，...
JS获取IMG图片高宽的简单实例
01-19
不管用什么样的方法都无法获取到IMG标签的高宽，最后只有给图片定一个高宽的比例值；趁今天有空我就写了几个demo测试了下，找了下原因；且听我细细说来，如有哪里说的不对的，欢迎拍砖～～～  首先获取高宽的方法具...
vue 检测用户上传图片宽高的方法
10-15
在`onload`回调中，我们可以访问到图片的`naturalWidth`和`naturalHeight`属性，它们分别表示图片的原始宽度和高度： ```javascript methods: { getUpImg(imgurl, keys) { // ...其他逻辑... this.$nextTick(() ...
jQuery设置图片等比例缩小的方法
10-19
在这个示例中，我们首先获取图片的原始宽度和高度（`naturalWidth` 和 `naturalHeight`），然后判断是否超过了预设的最大宽度（`maxWidth`）。如果超过了，我们计算新的高度，以保持原始宽高比。接着，我们将图片...
使用JavaScript解决网页图片拉伸问题(推荐)
10-21
HTML5 提供了 `naturalWidth` 和 `naturalHeight` 属性来获取图片的原始宽度和高度。对于不支持这些属性的旧版IE浏览器（如IE6、7、8），可以通过创建一个新的 `Image` 对象并监听其 `onload` 事件来获取图片尺寸： ...
javascript使用链接跨域下载图片
10-16
3. 设置`canvas`的宽度和高度与图片一致。 4. 使用`drawImage()`方法将图片绘制到`canvas`上。 5. 调用`toDataURL()`方法，传入图像类型（如`'image/jpeg'`或`'image/png'`），得到Base64编码的字符串。 ```...
jQuery图片裁剪插件 功能非常强大
08-23
获取图片的Canvas画布： function getSourceCanvas(image, data) { var canvas = $('<canvas>')[0], context = canvas.getContext('2d'), width = data.naturalWidth, height = data.naturalHeight, ...
html5 中新的naturalWidth和naturalHeight属性
leiwuxing的专栏
10-13 1926
在HTML 5中，新增加了两个用来判断图片的宽度和高度的属性，分别为 .naturalWidth 和naturalHeight属性，例子如下： var rw = myimage.naturalWidth; // 真实图片宽度 var rh = myimage.naturalHeight; //真是图片高度 但有个前提是，必须在图片完全下载到客户端浏览器才能判断， ，目前在ie 9
vue 如何获取图片的原图尺寸_js获取图片信息（一）-----获取图片的原始尺寸
weixin_34916118的博客
12-28 1568
如何获取图片的原始尺寸大小？如下，当给 img 设置一个固定的大小时，要怎样获取图片的原始尺寸呢？#oImg{width: 100px;height: 100px;}方法一：HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。w = document....
js获取图片原始尺寸
05-26
可以使用Image对象的naturalWidth和naturalHeight属性来获取图片的原始尺寸，示例代码如下： ```javascript var img = new Image(); img.onload = function() { console.log('原始尺寸：' + img.naturalWidth + ' x ' + img.naturalHeight); }; img.src = '图片地址'; ``` 其中，onload事件会在图片加载完成后触发，此时可以获取到图片的原始尺寸。请将代码中的“图片地址”替换为你需要获取原始尺寸的图片地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值