之前项目后台上传图片时需要对图片的宽高做限制,一开始百度了之后使用js进行判断,可是这种方式存在一定问题,后来就改在后台判断了。现在吧这两种方式都贴出来。

一、用js获取:

先说第一个方法:obj.style.width;这个方法,只有在标签里用style属性写进了width的大小,才可以获取到值,否则只返回的为空。看下面的demo:

<img style="width:400px" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
var imgW = document.getElementsByTagName('img')[0].style.width;
alert(imgW); //返回值为400px,否则返回空;
</script>

以上这个方法只适应用标签的style属性里添加width值,在引入的样式表中添加width值(不管是link引入还是html页面中使用style标签)也一样获取不到值,返回为空。

然后说一下第二个方法与第三个方法obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight);一般情况下,如果标签没有设置padding值及border值,那么它们两个获取到的值是一样的。但很多情况下都不是这样的,其实offsetWidth得到的是width值+padding值+border值,clientWidth得到的是width值+padding值,看下面的demo:

<style>
img{ padding:20px;border:1px solid red;}
</style>
<img style="width:400px" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">
<script>
var img = document.getElementsByTagName('img')[0],
imgOffsetWidth = img.offsetWidth, //442px
imgClientWidth = img.clientWidth; //440px;
</script>

注意,现在获取到的img标签的宽,是在img标签里添加的style=”width:400px” 。如果去掉这一属性值,那么上面demo里的imgOffsetWidth与imgClientWidth返回的值就是图片本身的高宽值。可以偿试下。

另处,getComputedStyle 与 currentStyle是处理兼容性的两个方法,获取到的值都是图片在屏幕上显示的仅仅图片的高宽值,不会获取到img标签的padding及border值;但其中getComputedStyle适用于Firefox/IE9/Safari/Chrome/Opera浏览器,currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表,那么只有getComputedStyle能获取到值,即为图片本身高宽值,currentStyle则返回auto。下面有一个demo:

<img style="width: 400px;" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

    <script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null)[name];
}else{
return el.currentStyle[name];
}
}
var div = document.getElementsByTagName('img')[0];
alert(getStyle(div, 'width'));
</script>

可以把img标签里的style属性去掉再测试下。

最后就是obj.naturalWidth(naturalHeight)方法,这是HTML5里新添加的一个获取元素高宽的方法,但只适用于Firefox/IE9/Safari/Chrome/Opera浏览器。下面有一个适用于各个浏览器的demo:

<img style="width: 400px;" src="http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9QXV9C_fw658">

    <script>
document.addEventListener('DOMContentLoaded',function(){
function getImgNaturalStyle(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]
}
var img = document.getElementsByTagName('img')[0],
imgNatural = getImgNaturalStyle(img);
alert(imgNatural);
});
</script>

需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到,否则会报错。

document.addEventListener("DOMContentLoaded",function(){

       //原因就是当时我们的代码是在这样的环境下写的,这个时候,只是加载了img的标签,即只有DOM结构,图片还没有完全加载进来,所以获取到的值都是0,但如果在window.onloaded的环境下写,就能得到其所示高宽了

}); 

文章参考自:http://www.cnblogs.com/koukouyifan/p/4066564.html

二、将图片上传到后台后进行判断,再将结果返回到前端

  一种是先加载图片到内存,从而获取到图片宽高:

  BufferedImage bufferedImage = ImageIO.read(new File(imagePath));

  int width = bufferedImage.getWidth();

   int height = bufferedImage.getHeight();

  还有一种是不加载整张图片获取图片宽高:  

  File f = new File(upfile.getFilePath());
  // Getting image data from a InputStream
  FileInputStream b;
  b = new FileInputStream(f);
  ImageUtil imageInfo = new ImageUtil(b);

  int imgWidth = imageInfo.getWidth();
  int imgHeight = imageInfo.getHeight();

import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

/**
*
* @author 
* 不需要加载整个图片,获取图片的信息
*/
public class ImageUtil {
private int height;
private int width;
private String mimeType;

public ImageUtil(File file) throws IOException {
InputStream is = new FileInputStream(file);
try {
processStream(is);
} finally {
is.close();
}
}

public ImageUtil(InputStream is) throws IOException {
processStream(is);
}

public ImageUtil(byte[] bytes) throws IOException {
InputStream is = new ByteArrayInputStream(bytes);
try {
processStream(is);
} finally {
is.close();
}
}

private void processStream(InputStream is) throws IOException {
int c1 = is.read();
int c2 = is.read();
int c3 = is.read();

mimeType = null;
width = height = -1;

if (c1 == 'G' && c2 == 'I' && c3 == 'F') { // GIF
is.skip(3);
width = readInt(is,2,false);
height = readInt(is,2,false);
mimeType = "image/gif";
} else if (c1 == 0xFF && c2 == 0xD8) { // JPG
while (c3 == 255) {
int marker = is.read();
int len = readInt(is,2,true);
if (marker == 192 || marker == 193 || marker == 194) {
is.skip(1);
height = readInt(is,2,true);
width = readInt(is,2,true);
mimeType = "image/jpeg";
break;
}
is.skip(len - 2);
c3 = is.read();
}
} else if (c1 == 137 && c2 == 80 && c3 == 78) { // PNG
is.skip(15);
width = readInt(is,2,true);
is.skip(2);
height = readInt(is,2,true);
mimeType = "image/png";
} else if (c1 == 66 && c2 == 77) { // BMP
is.skip(15);
width = readInt(is,2,false);
is.skip(2);
height = readInt(is,2,false);
mimeType = "image/bmp";
} else {
int c4 = is.read();
if ((c1 == 'M' && c2 == 'M' && c3 == 0 && c4 == 42)
|| (c1 == 'I' && c2 == 'I' && c3 == 42 && c4 == 0)) { //TIFF
boolean bigEndian = c1 == 'M';
int ifd = 0;
int entries;
ifd = readInt(is,4,bigEndian);
is.skip(ifd - 8);
entries = readInt(is,2,bigEndian);
for (int i = 1; i <= entries; i++) {
int tag = readInt(is,2,bigEndian);
int fieldType = readInt(is,2,bigEndian);
int valOffset;
if ((fieldType == 3 || fieldType == 8)) {
valOffset = readInt(is,2,bigEndian);
is.skip(2);
} else {
valOffset = readInt(is,4,bigEndian);
}
if (tag == 256) {
width = valOffset;
} else if (tag == 257) {
height = valOffset;
}
if (width != -1 && height != -1) {
mimeType = "image/tiff";
break;
}
}
}
}
if (mimeType == null) {
throw new IOException("Unsupported image type");
}
}

private int readInt(InputStream is, int noOfBytes, boolean bigEndian) throws IOException {
int ret = 0;
int sv = bigEndian ? ((noOfBytes - 1) * 8) : 0;
int cnt = bigEndian ? -8 : 8;
for(int i=0;i<noOfBytes;i++) {
ret |= is.read() << sv;
sv += cnt;
}
return ret;
}

public int getHeight() {
return height;
}

public void setHeight(int height) {
this.height = height;
}

public int getWidth() {
return width;
}

public void setWidth(int width) {
this.width = width;
}

public String getMimeType() {
return mimeType;
}

public void setMimeType(String mimeType) {
this.mimeType = mimeType;
}

@Override
public String toString() {
return "MIME Type : " + mimeType + "\t Width : " + width
+ "\t Height : " + height;
}
}

获取img的真实宽高的更多相关文章

  1. naturalWidth、naturalHeight来获取图片的真实宽高

    一般在图片放大缩小,或动态插入图片时使用 function imagea(img){ var w = img.naturalWidth; var h = img.naturalHeight; } 注: ...

  2. Android 获取图片真实宽高

    Resources res = mContext.getResources(); BitmapFactory.Options opts = new BitmapFactory.Options(); o ...

  3. 【图像处理】Golang 获取JPG图像的宽高

    一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...

  4. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  5. js获取精确的元素宽高(普通获取高度会有误差)

    当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...

  6. Android在onCreate中获取控件的宽高

    在某些需求下,我们需要在onCreate的时候就获取到控件的宽高,但是如果直接用view.getWidth()或view.getHeight()会得到0.这是因为在onCreate执行的时候,控件还没 ...

  7. activity 中获取控件的宽高

    1.第一种方式: TextView textview3 = findViewById(R.id.textview3); textView3.post(new Runnable() { @Overrid ...

  8. 解决获取图片实际尺寸(宽高)的bug

    需求:获取图片的宽高其实是为了预先做好排版样式布局做准备. 可以利用图片onload事件监听获取图片的宽高属性值.在IE9以下版本只能使用图片的width与height属性,HTMl5中新加入了nat ...

  9. js 获取屏幕或元素宽高...

    窗口相对于屏幕顶部距离 window.screenTop 窗口相对于屏幕左边距离 window.screenLeft, 屏幕分辨率的高 window.screen.height, 屏幕分辨率的宽 wi ...

随机推荐

  1. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  2. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  3. GPS 气压计高度测量

    气压计测某个点的高度是不准的,因为天气.温度等原因会导致不同时刻同一地点气压不同,所以气压计测量不准.但气压计测量相对高度是很准的.GPS测相对高度不准,但测定点高度比较准.

  4. 中国知网cnki(永久会员账号)

    中国知网cnki(永久会员账号)大男孩免费分享   网站简介: (中国知网http://www.cnki.net/)中国知网是国家知识基础设施(National Knowledge Infrastru ...

  5. RBAC基于角色的访问控制

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...

  6. [转]阿里巴巴数据库连接池 druid配置详解

    一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...

  7. java十进制转十六进制

    package com.ds.detect; import java.util.Scanner; public class ToHEX{ public static void main(String[ ...

  8. Linux学习笔记之兄弟连

    systemctl --user enable pulseaudio说明:安装完成后系统没有声音,用该命令可以打开.ifconfig eth0 192.168.118.1说明:给网卡设置IP地址.ap ...

  9. tp框架之分页与第三方类的应用

    1.先把分页类放在根目录下,比如放在某个模块下 2.在类里面写入命名空间,注意类名的格式(类名要与里面的方法名一致) 3.在需要的方法里面按照路径进行实例化,然后就可以使用了 方法: public f ...

  10. yii 简单依赖注入

    <?phpnamespace app\controllers;use Yii;use yii\di\Container;use yii\di\ServiceLocator;use yii\web ...