`

jquery获取图片尺寸

 
阅读更多

例如 <img src="bag001.jpg" id="preview" />,没有也可以,但找起来比较麻烦。

$('#preview').width();
$('#preview').height();

上面这个宽和高是你看到的图片的大小,不一定是图片本身的真实尺寸(有可能在 HTML 中你设置了 width 和 height)。

要得到图片的真实尺寸:

var imgWidth, imgHeight;
// 这里创建一个图像保存到内存,并没有添加到 HTML 中,只是个参考
$("<img/>").attr("src", "http://www.example.com/images/bag001.jpg").load(function() {
imgWidth = this.width;
imgHeight = this.height;
});
// 现在 imgWidth 和 imgHeight 就是图像真实的尺寸

分享到:
评论
1 楼 swordinhand 2012-07-03  
应该是.ready(function(){ ,用load的话,好像在图片还没载入完全之前就会执行了,得到的高和宽都是0

相关推荐

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

    ### 使用JavaScript和jQuery获取图片尺寸 1. **通过JavaScript获取图片尺寸** JavaScript原生的Image对象提供了获取图片尺寸的能力。通过创建一个Image对象,并设置其src属性为图片的URL,然后等待图片加载完成...

    如何解决谷歌浏览器下jquery无法获取图片的尺寸

    在本文中,主要讨论了在谷歌浏览器中使用jQuery获取图片尺寸时遇到的问题及其解决方案。通常情况下,使用以下jQuery代码在页面加载完成后尝试获取图片的高度和宽度: ```javascript $(document).ready(function(){ ...

    基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)

    ### jQuery获取图片尺寸 获取图片实际尺寸是进行图片处理的重要一步。文章给出了`getImageWidth`函数,该函数接受一个图片源地址作为参数,并创建一个新的`Image`对象。通过检查该对象的`complete`属性来判断图片...

    JQ 获取图片真实宽高

    通过以上介绍,我们可以了解到,使用jQuery获取图片真实宽高需要结合图片的加载事件和相应的jQuery方法。在实际应用中,考虑到性能和兼容性,我们还需要关注一些细节处理,如错误处理、异步加载情况以及性能优化等。...

    jQuery自定义图片尺寸上传预览特效代码.zip

    本资源"jQuery自定义图片尺寸上传预览特效代码.zip"显然是一个包含使用jQuery实现的图片上传预览功能的代码示例。这个功能对于Web应用程序非常有用,特别是那些涉及用户上传图片的网站,如社交媒体、电商平台或个人...

    基于jquery的图片裁剪插件

    基于jQuery的图片裁剪插件为此提供了便利,它允许用户在浏览器中预览并裁剪图片,然后以所需尺寸上传。本文将深入探讨此类插件的核心原理、应用场景以及如何实现。 ### 1. jQuery框架基础 jQuery是一个广泛使用的...

    JQuery实现图片缩放

    在这个函数中,我们首先通过`attr('width')`和`attr('height')`获取图片的原始尺寸,然后计算出缩放比例,使得图片能在目标尺寸内适应且不失真。最后,我们使用`.width()`和`.height()`方法将新的尺寸应用到图片上。...

    基于jquery的图片截取工具

    4. **图片处理**:利用JavaScript的Canvas API,如`context.drawImage()`方法在canvas上绘制图片,`context.getImageData()`获取图片的像素数据,`context.fillRect()`或`context.clearRect()`进行截取区域的标记。...

    jquery图片轮显

    ### jQuery 图片轮显技术详解 #### 一、概述 在网页设计中,图片轮显是一种常见的视觉效果,常用于展示广告、推荐内容等。利用jQuery实现图片轮显功能不仅简单快捷,还能确保良好的用户体验。本文将根据提供的代码...

    jquery完成图片的缩放操作

    // 获取图片原始宽度 var originalHeight = $('#image-to-scale').height(); // 获取图片原始高度 $('#scale-button').click(function() { var scaleFactor = 1.2; // 缩放比例,可以根据需求调整 // 计算新...

    jquery图片延迟加载

    - 对于图片,可以设置一个默认的占位符,如灰色背景或者小尺寸的缩略图,并设置`data-src`属性来存储实际图片的URL,而不是直接在`src`属性中指定。 ```html 延迟加载的图片"&gt; ``` 2. **编写jQuery代码** ...

    jQuery mobile图片截图

    在 jQuery Mobile 中实现图片截图功能,可以帮助用户更方便地分享或保存网页中的图像。 图片截图通常涉及到以下几个关键知识点: 1. **HTML5 Canvas**:Canvas 是 HTML5 中的一个重要元素,允许开发者在网页上动态...

    JQuery控制图片大小代码

    结合jQuery,可以确保图片尺寸在指定范围内: ```css img { max-width: 100%; height: auto; } ``` 这样,图片将始终填充其容器,但不会超出容器大小。 7. **插件和库** jQuery社区提供了很多插件,如`...

    jquery图片插件设置图片等比例缩放

    2. **计算比例**:获取图片的原始宽度和高度,然后根据目标容器的尺寸计算出缩放比例。这可以通过`width()`和`height()`方法获取元素尺寸,`parent().width()`或`parent().height()`获取父容器尺寸。 3. **设定新...

    jquery图片操作!

    在这个例子中,`#previewContainer`是预览容器的ID,`$(this).offset()`用于获取图片在页面中的位置,以便预览容器能准确地跟随鼠标。预览图的背景图像设置为原始图片的源,从而实现预览效果。 此外,jQuery还提供...

    Jquery图片定时切换展示

    在实际开发中,可能还需要考虑更多的细节,比如防止图片加载延迟导致的显示问题、图片尺寸适应、触摸事件的支持等。通过理解和应用这些知识点,你可以创建一个功能完备、用户体验良好的图片轮播组件。

    jquery 读取图片信息

    有时候,我们可能需要获取图片的元数据,比如ISO感光度、焦距、像素尺寸以及相机型号等信息。这些信息通常存储在图片的EXIF(Exchangeable Image File Format)数据中。jQuery-exif插件就是为了解决这个问题,它允许...

    jquery图片预览插件实例

    2. **获取图片数据**:在用户选择图片后,我们需要获取到图片的数据。如果是直接点击网页上的图片,可以使用`attr('src')`获取图片的URL;如果是通过文件输入框选择图片,可以使用HTML5的`FileReader` API读取文件...

Global site tag (gtag.js) - Google Analytics