如何用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 ...
随机推荐
- 详细讲解Android对自己的应用代码进行混淆加密防止反编译
1.查看项目中有没有proguard.cfg. 2.如果没有那就看看这个文件中写的什么吧,看完后将他复制到你的项目中. -optimizationpasses 5 -dontusemixedcasec ...
- 关于Eclispe插件开发起步(一)
Eclipse中三个最吸引人的地方是: 第一是它创新性的图形API,就是SWT/JFace. 第二是它的插件机制. 第三个是利用它的插件机制开发众多功能强大的插件. 插件成就了Eclipse的今天.E ...
- Better Completion插件使用
最近学习Bootstrap,发现Sublime text2不支持Bootstrap的代码提示,所以得装一个Bootstrap的代码提示插件.试了好几个之后发现Better-Completion最方便, ...
- SpringMVC注册拦截器
方法1: 拦截所有URL <mvc:interceptors> <bean class="cn.ciss.interceptor.LoginInterceptor" ...
- EXT.NET学习笔记(一) 下载配置使用
新公司使用ext.net开发,开始学习该知识: 首先下载ext.net,目前我使用的版本为1.7,该版本免费,基本的功能也够用,使用ext.net进行开发时强烈建议使用VS2015,能便捷的提示,大大 ...
- 解决IIS7中出现An error occurred on the server when processing the URL错误提示的方法
相信用过IIS7的朋友在调试程序的时候都遇到过下面这样的错误提示: An error occurred on the server when processing the URL. Please ...
- asp.net 中excel 导入数据库
protected void Button1_Click(object sender, EventArgs e) { SqlConnection conn = new SqlConnection(Sy ...
- Ubuntu将程序图标加到启动器
问题: Ubuntu中安装一些程序的时候图标可能没有放到启动器中,不方便使用. 解决问题: 因为FileZilla这个程序是直接解压缩之后便可以使用的,每次都需要到文件所在目录Filezilla/bi ...
- 05顺序队列_Queue--(栈与队列)
#include "stdio.h" #include "stdlib.h" #include "io.h" #include " ...
- vs2012找不到system web optimization命名空间
今天新装了vs2012,安装完成后,创建了一个mvc4应用程序,创建生成出现了几个错误.通过错误我们的解决方案就是去找引用不到的路径,如何在vs2012中实现呢? 在工具栏中找工具--库程序包管理器- ...