`
darrenzhu
  • 浏览: 802121 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript获取图片(Image)的大小(宽度,高度)

阅读更多
如果只有图片的URL
function getImageDimensions(imgStyleRule) {
  var defaultSize, img;
  defaultSize = {
    width: 10,
    height: 30
  };
  if (!imgStyleRule || !imgStyleRule.style || !imgStyleRule.style.backgroundImage) {
    return defaultSize;
  }
  img = new Image();
  img.src = imgStyleRule.style.backgroundImage.replace(/url\(|\)$|"/ig, '');
  return {
    width: img.width,
    height: img.height
  };
}


[size=medium]
如何获取imgStyleRule, 参考
http://darrenzhu.iteye.com/admin/blogs/2065946


如果图片已经加载,可以通过如下方式获取
var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

[/size]
分享到:
评论

相关推荐

    高度,javascript判断上传图片大小,宽度,高度

    在JavaScript中,对上传图片进行大小、宽度和高度的判断是一项常见的前端操作,尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点...

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

    <title>JavaScript获取图片原始大小 img { max-width: 100%; height: auto; } <img id="image" src="你的图片路径.jpg" onclick="displayOriginalSize(event)"> <p id="sizeInfo"></p> function ...

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

    在JavaScript中,获取图片的原始尺寸,特别是宽度,是一个常见的需求。这主要涉及到网页中`<img>`元素的尺寸属性和HTML5中的新特性。原始尺寸指的是图片在未经任何CSS或JavaScript修改时的自然大小。以下是一些关于...

    IE9浏览器下 使用JS获取图片尺寸大小 的方法

    下面是一个在IE9中使用JavaScript获取图片尺寸的示例代码: ```html <!DOCTYPE html> <title>IE9获取图片尺寸示例 function getImageSize(url) { var img = new Image(); img.src = url; img.onload ...

    Javascript获取图片原始宽度和高度的方法详解

    在JavaScript中,获取图片的原始尺寸是一个常见的需求,特别是在动态调整图片大小或处理图像显示时。本文将深入探讨如何有效地获取图片的原始宽度和高度,同时提供兼容不同浏览器的解决方案。 首先,我们通常会尝试...

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

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

    js和jquery如何获取图片真实的宽度和高度

    1. **通过JavaScript获取图片尺寸** JavaScript原生的Image对象提供了获取图片尺寸的能力。通过创建一个Image对象,并设置其src属性为图片的URL,然后等待图片加载完成(load事件触发),我们可以获取到图片的自然...

    js判断图片加载完成后获取图片实际宽高的方法

    在Web开发过程中,获取...以上就是使用JavaScript获取图片实际尺寸的基本方法和注意事项。通过理解这些知识点,我们可以在Web开发中更加灵活和准确地处理图片尺寸相关的问题,从而改善用户的视觉体验和页面的适应性。

    JavaScript图片裁切主要是获取他们的大小发送给系统。

    我们需要记录用户选择的起始坐标(x, y)和裁剪区域的宽度(width)、高度(height)。 4. **Canvas的drawImage()方法**: 这个方法用于在Canvas上绘制图像。在裁切过程中,我们可以使用这个方法,配合裁剪坐标和...

    JQ 获取图片真实宽高

    "JQ 获取图片真实宽高"这个标题指的是使用jQuery来获取图片在页面加载完成后的真实宽度和高度,因为图片在未完全加载前,其宽度和高度可能是未知的。下面我们将深入探讨如何实现这一功能,并了解相关的知识点。 1. ...

    javascript实现获取图片大小及图片等比缩放的方法

    当图片加载完成后,可以直接从Image对象的width和height属性获取图片的宽度和高度。为了避免不必要的图片加载,我们在获取尺寸之前检查传入的图片src是否与缓存中的图片src相同。如果不同,则更新缓存的Image对象的...

    javascript 获取图片尺寸及放大图片

    对于Firefox和Chrome等支持W3C标准的浏览器,我们可以利用`naturalWidth`和`naturalHeight`属性来获取图片的原始尺寸,这两个属性是只读的,代表了图片在未进行任何缩放之前的宽度和高度。例如: ```html ...

    jquery.imgGetSize:在图片onload之前获取图片的大小

    image-size使用该插件,可以在图片onload之前获取图片的大小,在瀑布流布局中,应该可能会有用处。###实现原理:使用轮询,在图片onload之前,获取到图片大小。如果图片已经被缓存过,直接返回相关信息。回调参数...

    javascript实现图片上传

    然后创建一个新的`Image`对象并赋值为当前图片的源,以便获取图片的实际尺寸。如果图片的宽高比大于或等于预设比例,它会根据宽度进行调整;否则,根据高度进行调整。调整后,设置`alt`属性为图片的新尺寸。 3. **...

    JS获取图片高度宽度的方法分享

    在JavaScript中获取图片的高度和宽度,是前端开发过程中常见需求之一,因为有时候我们需要根据图片尺寸进行布局调整或者为不同尺寸的图片准备不同大小的占位。然而,在网络图片加载的场景下,由于浏览器的异步加载...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    2. 获取图片信息:函数内部首先创建了一个新的Image对象,用于获取图片的原始尺寸。然后,计算图片原始宽高比与目标最大宽高比之间的比例。 3. 计算缩放比例:当图片宽度和高度的比例小于1时,意味着图片宽度或高度...

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    2. **检查图片尺寸**:确保图片的宽度和高度均大于零,这是进行缩放的前提条件。 3. **计算宽高比**:比较图片原始的宽高比与目标宽高比,以决定如何进行缩放。 4. **执行缩放操作**: - 如果图片的原始宽高比大于...

    无组件上传修改(获取上传的FLASH,图片宽度和高度)

    对于图片,我们可以利用Image对象来获取其宽度和高度,这对于图片预览、调整布局或者限制上传图片尺寸等场景非常有用。 在“风声无组件上传修改版”中,可能采用了AJAX异步上传技术,使得用户在上传过程中可以继续...

Global site tag (gtag.js) - Google Analytics