如何用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 ...
随机推荐
- win7 cmd命令行窗口 宽度无法变大 自由调整大小
偶然遇到了这个问题,百度查到了解决方案,执行一个bat批处理命令. mode con lines=40 mode con cols=160 color 250 cls @cmd
- Vim 的补全模式加速器,轻松玩转全部 15 种自动补全模式
1. 关于 Vim 补全模式 ---- Vim 一共提供了 15 种自动补全的模式(:help ins-completion).其中有两种的补全列表内容与另外两种相同,只是排序不同,这 15 种 ...
- (总结)CentOS Linux下VNC Server远程桌面配置详解
一.安装相应桌面环境与vnc服务端和客户端: # yum groupinstall "GNOME Desktop Environment"(CentOS 5.x安装GNOME桌面环 ...
- 模仿微博 用OC语言编写
演示如下 源代码下载:模仿微博.zip
- RabbitMQ 原文译04--路由
在前一篇文章中我们构建了一个简单的日志系统,我们可以向多个接受者广播消息. 在这篇文章我,我们将要添加一些功能使得针对部分消息的接受成为可能,例如我们只对错误的消息进行磁盘记录,同时又可以把所有的消息 ...
- Plugin with id 'android-apt' not found
解决路径: 1.查看miniSDK最外面的build.gradle 添加这句.具体参考一下demo.谢谢
- 设计模式------STRATEGY(策略模式)
http://blog.csdn.net/wuzhekai1985/article/details/6665197.仅供参考. 策略模式:实现替换功能,如cache替换算法:当发生Cache缺失时,C ...
- solr-tomcat 中文乱码
<Connector URIEncoding="UTF-8" port="8080" protocol="HTTP/1.1" conn ...
- ###《More Effective C++》- 基础议题
More Effective C++ #@author: gr #@date: 2015-05-11 #@email: forgerui@gmail.com 一.仔细区别pointers和refere ...
- GridView 自定义表头
//修改表头 protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { switch (e.Row.Ro ...