如何用JavaScript在浏览器端获取图片的原始尺寸大小?
var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
从技术上,我们可以轻松的用文本的最大宽度限制图片,让它们都保持一个宽度,而不按文本的宽度时,我们就需要每个图片的自己的尺寸。我们可以在服务端编辑时声明图片的原始尺寸。而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸,动态改变图片的显示大小。这样即能兼容老的也文本最大宽度的方式,还可以在需要的时候让图片呈现出其原始的大小。
Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以,你不能使用timeout函数延时等待,最好的方法是使用图片的onload事件。
为了避免CSS对图片大小尺寸的影响,上面的代码将图片拷贝到内存中进行计算。
如果你的页面是老式页面,你可以按需把这段代码嵌入页面底部,它不需要你修改原有页面。
如何用JavaScript在浏览器端获取图片的原始尺寸大小?的更多相关文章
- js获取图片信息(一)-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...
- JavaScript获取图片的原始尺寸
页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...
- js获取图片的原始尺寸
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- jq获取图片的原始尺寸,自适应布局
原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- 转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)
转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...
- [转]js动态获取图片长宽尺寸
http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...
- 使用Python获取图片的物理尺寸(KB)
如何获取图片的物理尺寸,而非(width, height)? #! -*- coding: utf-8 -*- import requests import io url = "https: ...
- Python3.7 练习题(三) 将指定目录下的图片进行批量尺寸大小处理
# 将指定目录下的图片进行批量尺寸大小处理 #修改图片尺寸 导入Image os 快捷键 alt+enter import os from PIL import Image def process_i ...
随机推荐
- MyBatis6:MyBatis集成Spring事务管理(下篇)
前言 前一篇文章<MyBatis5:MyBatis集成Spring事务管理(上篇)>复习了MyBatis的基本使用以及使用Spring管理MyBatis的事务的做法,本文的目的是在这个的基 ...
- div嵌套内层div的margin-top转移给外层div的解决办法
在web开发过程中,有些情况下给内层div设置的margin却被莫名奇妙的转移给了外层div.百度之后,发现它竟然是css2.1中盒模型中规定的内容: In this specification, t ...
- [原] Unity下的ElectroServer的连接
ES的版本是5.4.1,示例目录下code_examples\ConnectAndLoginManually是Unity的连接和登录代码. 除了host和port需要指定,在连接时需要指定连接方式,如 ...
- Spring 3.x 实践 第一个例子(Spring 3.x 企业应用开发实战读书笔记第二章)
前言:工作之后一直在搞android,现在需要更多和后台的人员交涉,技术栈不一样,难免鸡同鸭讲,所以稍稍学习下. 这个例子取自于<Spring 3.x 企业应用开发实战>一书中的第二章,I ...
- Oracle学习第一天---安装和基础入门
国庆七天假,决定静下心来入门Oracle数据库. 环境:Ocacle 11g 软件安装包和安装图解,大家可以在我的百度网盘上下载:链接:http://pan.baidu.com/s/1ntjDEnZ ...
- 初学C++,开博第一篇
几个维度相同的数组转置算法,这两种完全相同://注意:如果维度不同,转置会出错误,因为下标会越界...解决办法是把数组的维度调齐,或者是写到另一新数组中. for(int i=0;i<row;i ...
- libjingle线程机制
libjingle包装了所有的线程,包括signaling thread,worker thread, 和其它任何线程,用talk_base::Thread来包装.所有的 Thread对象由Threa ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- Ubuntu14.04 LTS安装不成功
北京时间2014年04月18日早8:00时,Ubuntu14.04 LTS在ubuntu官网放出,果断下之体验. 镜像为ubuntu-14.04-desktop-amd64.iso.大小为964M.M ...
- MVC 弹出提示框
第一种弹框成功后要刷新界面 [HttpPost] public ActionResult Add(Maticsoft.Model.Project.ProjectMoneyPlan model) { m ...