`

html5 中新的naturalWidth和naturalHeight属性

阅读更多
  在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为
.naturalWidth 和naturalHeight属性,例子如下:

var rw = myimage.naturalWidth; // 真实图片宽度
var rh = myimage.naturalHeight; //真是图片高度

但有个前提是,必须在图片完全下载到客户端浏览器才能判断,
,目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的,
如果是不支持的版本浏览器,那可以用传统方法判断,如下:

var myimage = document.getElementById("myimage");
if (typeof myimage.naturalWidth == "undefined") {
// IE 6/7/8
var i = new Image();
i.src = myimage.src;
var rw = i.width;
var rh = i.height;
}
else {
// HTML5 browsers
var rw = myimage.naturalWidth;
var rh = myimage.naturalHeight;
}
2
1
分享到:
评论

相关推荐

    wangmengHB#frontend-notes#5. 画布绘制动作1

    3. 绘制其他来源 1. complete, naturalWidth 和 naturalHeight 1. width: 图片宽度,单位是像素 2. heig

    html5通过javascript预览图片以及获取图片属性

    获取图片属性,如宽度、高度等,可以等待图片加载完成后,通过`img`元素的`naturalWidth`和`naturalHeight`属性获取: ```javascript imgPreview.onload = function() { console.log('图片宽度:', this....

    jQuery.imgUtil:图像实用程序

    较新的浏览器具有 naturalWidth/naturalHeight 功能。 有了这些,我们就可以得到 img 的原始宽度/高度。 但是这些功能有时很难处理,因为它在 img 未加载完成之前失败并返回零。 $.imgUtil.calcNaturalWH 将 img 预...

    node-chat:node-socket实现即时聊天功能,服务器向客户端推送消息

    现在通过html5的naturalWidth和naturalHeight直接就能获取到图片的原始尺寸了,不管图片怎么被压缩和放大。var img = document.getElementsByTagName('img');var width = img.naturalWidth, height = img....

    JS上传图片点击获取图片色块特效代码.zip

    当图片加载完成后,可以通过其width和height属性获取图片尺寸,以及通过naturalWidth和naturalHeight属性获取原始尺寸。 3. **Canvas元素**:HTML5的Canvas提供了一个图形绘制环境,我们可以在其中进行像素级别的...

    JavaScript 在图片上单击获取图片原始大小.rar

    在JavaScript中,获取图片的原始大小通常涉及到两个关键属性:`naturalWidth`和`naturalHeight`。这些属性提供了图片在不进行任何缩放时的原始尺寸。以下将详细阐述如何利用JavaScript实现这一功能,以及相关的知识...

    JavaScript图片特效类

    例如,可以使用window对象的resize事件和图片的naturalWidth和naturalHeight属性。 以上就是JavaScript图片特效的一些核心知识点。在"第二章.图片特效类"这个压缩包中,可能包含了关于这些特效的代码示例、教程或者...

    JS获取IMG图片高宽的简单实例

    offsetWidth和offsetHeight、clientWidth和clientHeight以及getComputedStyle()和currentStyle提供了更为全面的尺寸信息,包括内容、内边距和边框,而HTML5的naturalWidth和naturalHeight则可以返回图片的原始尺寸。...

    js兼容火狐获取图片宽和高的方法

    首先,我们需要了解现代浏览器普遍支持的获取图片尺寸的方法,即直接访问img元素的naturalWidth和naturalHeight属性。这种方法代码简洁,直接在img元素加载完毕之后即可获得尺寸信息。 然而,在旧版火狐浏览器中,...

    voila:Voilà是一个jQuery插件,可为图像提供回调,让您知道它们何时加载

    Voilà具有受启发的API,并通过有用的方法(如abort()进行了naturalWidth并在所有浏览器中均支持naturalWidth和naturalHeight ,从而使其与IE6和IE7兼容。 支持多种加载方法,允许在naturalWidth可用时立即触发回调...

    JavaScript特效100例

    这通常涉及到JavaScript的addEventListener方法来绑定点击事件,然后通过读取图片的自然宽度和高度属性(naturalWidth和naturalHeight)来获取原始大小。 3. 很有意思的图片分裂复制效果:这种效果可以将图片分割成...

    纯JavaScript实现的图像缩放

    一旦获取了图像元素,我们可以通过修改其`width`和`height`属性来实现缩放。例如,如果要将图像的尺寸放大两倍,可以这样写: ```javascript var imgElement = document.getElementById('imageId'); imgElement....

    网页图片自动按照比例缩放到指定大小

    为了保持图片的比例,我们可以使用CSS中的`max-width`和`max-height`属性,配合`width: auto`或`height: auto`。例如: ```css img { max-width: 100%; height: auto; } ``` 这段代码会让图片的宽度最大不超过其...

    javascript实现加载各种尺寸图片自适应同一尺寸容器,切不变形

    var aspectRatio = naturalWidth / naturalHeight; if (naturalWidth > containerWidth || naturalHeight > containerHeight) { // 如果图片比容器大 if (containerWidth / aspectRatio ) { // 高度受限,按...

    影像检查「Image Checker」-crx插件

    通过将每个img元素的宽度和高度与naturalWidth和naturalHeight进行比较,来检查尺寸是否经过调整的图像。 高亮显示调整大小的图像,单像素图像,并在更改宽高比时发出警告。 支持语言:English (UK)

    JavaScript获取图片的原始尺寸以宽度为例

    - 自HTML5开始,浏览器提供了`naturalWidth`和`naturalHeight`属性,可以直接获取图片的原始宽度和高度。这些属性在大多数现代浏览器中可用,但在Internet Explorer 6、7和8中不可用。因此,检查`img.naturalWidth`...

    js等比缩放图片

    2. 设置初始宽高:确定图片的原始宽度和高度,通常可以在图片的`naturalWidth`和`naturalHeight`属性中获取。 ```javascript var naturalWidth = imgElement.naturalWidth; var naturalHeight = imgElement....

    Image Checker-crx插件

    语言:English (UK) 检查尺寸调整不正确的...通过将每个img元素的宽度和高度与naturalWidth和naturalHeight进行比较,来检查尺寸是否经过调整的图像。 高亮显示调整大小的图像,单像素图像,并在更改宽高比时发出警告。

    js 产品图片放大预览

    首先,我们可以通过HTML5的`<img>`标签来展示图片,并通过`src`属性设置图片源。在用户点击图片时,我们可以监听`click`事件,然后触发预览功能。为了实现预览,通常我们会创建一个新的`<div>`元素作为预览窗口,将...

    js实现的网页图片预览

    var scale = Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight); img.style.width = naturalWidth * scale + 'px'; img.style.height = naturalHeight * scale + 'px'; // 将图片添加到页面 }; ```...

Global site tag (gtag.js) - Google Analytics