获取上传的图像宽度和高度以查找实际图像尺寸

Question

我如何上传图片的高度和宽度，以原始尺寸显示。

Answer 1

记住Brad所说的（这似乎是服务器端的功能），您可以使用此php代码，但您首先应确认上传的文件确实是图像。

list($w, $h) = getimagesize($_FILES['yourUploadedFieldName']);

// $w holds the numeric width
// $h holds the numeric height

Answer 2

对于客户端大小的情况，可以使用以下内容：

;(function($){
    $.imageSize = function(imgUrl,callback){
        var img = $('<img>').attr('src',imgUrl).css('display','none').appendTo('body');
        img.load(function(){
            var call = callback || function(i,w,h){};
            call(imgUrl,$(this).width(),$(this).height());
        });
    };
})(jQuery);

（ jQuery插件）在加载图像之前，您无法获取图像大小，但是如果将其加载到后台等待，您将可以访问该信息。 例如

$.imageSize('http://www.nasa.gov/images/content/511786main_image_1848_946-710.jpg',function(i,w,h){
    alert(i+'\r\n'+w+'x'+h);
});

Answer 3

getimagesize应该可以解决问题，请查看更多文档http://php.net/manual/zh/function.getimagesize.php

Answer 4

如果您未指定高度和宽度，则img标签将以正确的尺寸显示图像

以下将显示mypic.jpg全尺寸

<img src='mypic.jpg' >

否则将显示宽度为200px，高度为比例的图像

<img src='mypic.jpg' width="200px" >

Answer 5

如果您使用原型Javascript库 ：

var img = new Element(
 'img', {
  src: 'image.jpg'
 }
);

img.observe(
 'load',
 function(event) {
  alert(
   Event.element(event).getWidth() + 
   'x' + 
   Event.element(event).getHeight()
  );
 }
);

$$('body').first().appendChild(img);
img.remove();

Answer 6

如果img标签没有width和height属性，并且css没有为它定义样式的宽度和高度，则图像将以“自然”尺寸呈现。