在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;
}
分享到:
相关推荐
3. 绘制其他来源 1. complete, naturalWidth 和 naturalHeight 1. width: 图片宽度,单位是像素 2. heig
获取图片属性,如宽度、高度等,可以等待图片加载完成后,通过`img`元素的`naturalWidth`和`naturalHeight`属性获取: ```javascript imgPreview.onload = function() { console.log('图片宽度:', this....
较新的浏览器具有 naturalWidth/naturalHeight 功能。 有了这些,我们就可以得到 img 的原始宽度/高度。 但是这些功能有时很难处理,因为它在 img 未加载完成之前失败并返回零。 $.imgUtil.calcNaturalWH 将 img 预...
现在通过html5的naturalWidth和naturalHeight直接就能获取到图片的原始尺寸了,不管图片怎么被压缩和放大。var img = document.getElementsByTagName('img');var width = img.naturalWidth, height = img....
当图片加载完成后,可以通过其width和height属性获取图片尺寸,以及通过naturalWidth和naturalHeight属性获取原始尺寸。 3. **Canvas元素**:HTML5的Canvas提供了一个图形绘制环境,我们可以在其中进行像素级别的...
在JavaScript中,获取图片的原始大小通常涉及到两个关键属性:`naturalWidth`和`naturalHeight`。这些属性提供了图片在不进行任何缩放时的原始尺寸。以下将详细阐述如何利用JavaScript实现这一功能,以及相关的知识...
例如,可以使用window对象的resize事件和图片的naturalWidth和naturalHeight属性。 以上就是JavaScript图片特效的一些核心知识点。在"第二章.图片特效类"这个压缩包中,可能包含了关于这些特效的代码示例、教程或者...
offsetWidth和offsetHeight、clientWidth和clientHeight以及getComputedStyle()和currentStyle提供了更为全面的尺寸信息,包括内容、内边距和边框,而HTML5的naturalWidth和naturalHeight则可以返回图片的原始尺寸。...
首先,我们需要了解现代浏览器普遍支持的获取图片尺寸的方法,即直接访问img元素的naturalWidth和naturalHeight属性。这种方法代码简洁,直接在img元素加载完毕之后即可获得尺寸信息。 然而,在旧版火狐浏览器中,...
Voilà具有受启发的API,并通过有用的方法(如abort()进行了naturalWidth并在所有浏览器中均支持naturalWidth和naturalHeight ,从而使其与IE6和IE7兼容。 支持多种加载方法,允许在naturalWidth可用时立即触发回调...
这通常涉及到JavaScript的addEventListener方法来绑定点击事件,然后通过读取图片的自然宽度和高度属性(naturalWidth和naturalHeight)来获取原始大小。 3. 很有意思的图片分裂复制效果:这种效果可以将图片分割成...
一旦获取了图像元素,我们可以通过修改其`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; } ``` 这段代码会让图片的宽度最大不超过其...
var aspectRatio = naturalWidth / naturalHeight; if (naturalWidth > containerWidth || naturalHeight > containerHeight) { // 如果图片比容器大 if (containerWidth / aspectRatio ) { // 高度受限,按...
通过将每个img元素的宽度和高度与naturalWidth和naturalHeight进行比较,来检查尺寸是否经过调整的图像。 高亮显示调整大小的图像,单像素图像,并在更改宽高比时发出警告。 支持语言:English (UK)
- 自HTML5开始,浏览器提供了`naturalWidth`和`naturalHeight`属性,可以直接获取图片的原始宽度和高度。这些属性在大多数现代浏览器中可用,但在Internet Explorer 6、7和8中不可用。因此,检查`img.naturalWidth`...
2. 设置初始宽高:确定图片的原始宽度和高度,通常可以在图片的`naturalWidth`和`naturalHeight`属性中获取。 ```javascript var naturalWidth = imgElement.naturalWidth; var naturalHeight = imgElement....
语言:English (UK) 检查尺寸调整不正确的...通过将每个img元素的宽度和高度与naturalWidth和naturalHeight进行比较,来检查尺寸是否经过调整的图像。 高亮显示调整大小的图像,单像素图像,并在更改宽高比时发出警告。
首先,我们可以通过HTML5的`<img>`标签来展示图片,并通过`src`属性设置图片源。在用户点击图片时,我们可以监听`click`事件,然后触发预览功能。为了实现预览,通常我们会创建一个新的`<div>`元素作为预览窗口,将...
var scale = Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight); img.style.width = naturalWidth * scale + 'px'; img.style.height = naturalHeight * scale + 'px'; // 将图片添加到页面 }; ```...