获取图片原始尺寸

前提:图片设置了别的width值

1、新建一个Image()对象,然后把图片的src赋给该对象

function getNaturalWidth(img) {

var image = new Image()

image.src = img.src

var naturalWidth = image.width

return naturalWidth

}

2、HTML5提供了新属性,naturalWidth/naturalHeight可以直接获取图片的原始宽高。

function getImgNaturalDimensions(img, callback) {

var nWidth, nHeight

if (img.naturalWidth) { // 现代浏览器

nWidth = img.naturalWidth

nHeight = img.naturalHeight

} else {                                       // IE6/7/8

var imgae = new Image()

image.src = img.src

image.onload = function() {

callback(image.width, image.height)

}

}

return [nWidth, nHeight]

}

注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。

时间: 2024-11-06 18:52:02

获取图片原始尺寸的相关文章

js获取图片原始尺寸

如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src="images/test.jpg" id="oImg" alt=""> HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高.这两个属性在Firefox/Chrome/Safari/

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

代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因为图片没有加载完成. 修改方法如下: $(document).ready(function(){ $img.load(function(){ var img_h=$img.height(); var img_w=$img.width(); }

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

谷歌浏览器下jquery无法获取图片的尺寸解决方案: 本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象,而在IE和火狐浏览器下能够正常获得,当然也不是任何时候都无法获取图片尺寸,下面就来介绍一下如何解决此问题. 代码如下: $(document).ready(function(){   var img_h=$img.height();    var img_w=$img.width();  }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因

Js获取图片原始宽高

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

积跬步,聚小流------java获取图片的尺寸

在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于BufferedImage操作的耗时,详情可查看链接查看原文 然后依据应用我自己在项目中略做修改,在这里记录下: <span style="font-size:14px;">package com.jzba.utils; import java.awt.image.BufferedI

js获取图片原始大小

摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=&quo

Live Writer 使用小贴示:发博客时始终使用图片原始尺寸

http://www.midifan.com/moduleuser-index-410481.htmhttp://www.midifan.com/moduleuser-index-410497.htmhttp://www.midifan.com/moduleuser-index-410566.htmhttp://www.midifan.com/moduleuser-index-410494.htmhttp://www.midifan.com/moduleuser-index-410541.htm

获取图片实际渲染的宽度、高度与图片原始的宽度和高度

在写页面时经常会遇到需要获取图片的宽度.高度等情况.然而以前总是获取的是图片实际渲染的宽度和高度,也就是你用css或js设置后的图片的宽度和高度,并不是图片原始的尺寸.今天突然遇到这个问题,一时之间不知如何做,查了下资料,自己摸索了一下.特此总结一下. 例如.有这样一张图片,代码如下: <img src="创建ajax的过程.png" alt="" > 1.获取图片渲染的宽度和高度(可用js或jQuery实现). (1).使用js获取图片实际渲染的宽度.

点读笔写字App(1)——从Drawable中获取图片画图

[如果你想了解这个点读笔写字App的背景,请移步这里 http://www.jianshu.com/p/ee2a1bb99280 ] 直到这篇文章的时候,我并不知道在android App运行的过程中需要使用到的图片文件应该放到何处比较合适,一点可以肯定的是不能在app安装时直接写到安装路径包的文件夹下面,因为这样会发生误删,从而引起app运行时获取不到图片的错误.如果不应该这么做,麻烦告诉我应该放到哪吧. 正如题目所说的,我把他放到了Drawable中,运行中就可以方便的取得图片了,不过放到d