获取img的真实宽高

Posted 2020-08-24 小二什么的

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取img的真实宽高相关的知识，希望对你有一定的参考价值。

之前项目后台上传图片时需要对图片的宽高做限制，一开始百度了之后使用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的真实宽高的主要内容，如果未能解决你的问题，请参考以下文章