如何使用JavaScript获取图像大小（高度和宽度）？

是否有任何JavaScript或jQuery API或方法来获取页面上图像的尺寸？

1379252 次浏览
小开

客户端宽度和客户端高度是DOM属性，它们显示DOM元素内部尺寸（不包括边距和边框）的当前浏览器内大小。因此，对于IMG元素，这将获得可见图像的实际尺寸。

var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
小开

使用jQuery你可以这样做：

var imgWidth = $("#imgIDWhatever").width();
小开

此外（除了雷克斯和伊恩的答案）还有：

imageElement.naturalHeight

和

imageElement.naturalWidth

这些提供了图像文件本身的高度和宽度（而不仅仅是图像元素）。

小开

其他所有人都忘记了的是，你不能在加载之前检查图像大小。当作者检查所有发布的方法时，它可能只在localhost上工作。由于jQuery可以在这里使用，请记住“就绪”事件是在加载图像之前触发的。$（'#xxx'）.宽度（）和.高度（）应该在onload事件或更高版本中触发。

小开

您还可以使用：

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
小开

您可以通过编程方式获取图像并使用Javascript检查尺寸…

const img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

如果图像不是标记的一部分，这可能很有用。

小开

您只能使用加载事件的回调来真正执行此操作，因为图像的大小在实际完成加载之前是未知的。类似下面的代码…

var imgTesting = new Image();


function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}


function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}




imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
小开

jQuery答案：

$height = $('#image_id').height();
$width  = $('#image_id').width();
小开

好吧，伙计们，我想我改进了源代码，以便能够在尝试找出其属性之前让图像加载，否则它将显示'0*0'，因为下一个语句将在文件加载到浏览器之前被调用。需要jQuery…

function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}
小开

如果您使用的是jQuery并且您正在请求图像大小，您必须等待它们加载，否则您将只获得零。

$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
小开

Nicky De Maeyer在背景图片后问道；我只是从css中获取它并替换“url（）”：

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
小开

在使用真实图像大小之前，您应该加载源图像。如果您使用JQuery框架，您可以通过简单的方式获得真实图像大小。

$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
小开

我认为这些答案的更新是有用的，因为投票最多的回复之一建议使用clientWidth和clientHeight，我认为现在已经过时了。

我用HTML5做了一些实验，看看哪些值实际上得到了返回。

首先，我使用了一个名为Dash的程序来概述图像API。 它指出height和width是图像的渲染高度/宽度，naturalHeight和naturalWidth是图像的固有高度/宽度（仅限HTML5）。

我使用了一个美丽的蝴蝶的图像，来自一个高度300和宽度400的文件。这个Javascript：

var img = document.getElementById("img1");


console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

然后我使用了这种超文本标记语言，高度和宽度采用内联CSS。

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

结果：

/*Image Element*/ height == 300         width == 400
naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150


/*Actual Rendered size*/    120                  150

然后我将超文本标记语言更改为以下内容：

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

即使用高度和宽度属性而不是内联样式

结果：

/*Image Element*/ height ==  90         width == 115
naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115


/*Actual Rendered size*/     90                  115

然后我将超文本标记语言更改为以下内容：

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

即同时使用属性和CSS，看看哪个优先。

结果：

/*Image Element*/ height ==  90         width == 115
naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150


/*Actual Rendered size*/    120                  150
小开 
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...
小开

从父div中删除浏览器解释设置很重要。因此，如果您想要真实的图像宽度和高度，您可以使用 

$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});

这是我的一个TYPO3项目示例，我需要图像的真实属性以正确的关系进行缩放。

小开

最近，我在柔性滑块中遇到了同样的问题。由于加载延迟，第一个图像的高度设置得更小。我尝试了以下方法来解决这个问题，它起作用了。 

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

这将为您提供相对于您设置的宽度的高度，而不是原始宽度或零。

小开

您可以在页面加载js或jQuery时应用onload handler属性，如下所示：-

$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;


});
小开 
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

这是我的方法，希望对你有帮助：）

小开 
function outmeInside() {
var output = document.getElementById('preview_product_image');


if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
} else {
output.src = URL.createObjectURL(event.target.files[0]);


}
return;


}


img.src = URL.createObjectURL(event.target.files[0]);
}

此工作适用于多个图像预览和上传。如果您必须为每个图像逐一选择。然后复制和过去的所有预览图像功能并验证！！！

小开

简单地说，你可以这样测试。

  <script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
小开

使用jQuery库-

使用.width()和.height()。

更多关于jQuery宽度和jQuery heigth。

示例代码-

$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

小开

在获取元素的属性之前，文档页面应该是onload的：

window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}
小开

这个答案正是我在寻找的（在jQuery中）：

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
小开

让我们将这里学到的所有内容组合成一个简单的函数（imageDimensions()）。它使用承诺。

// helper to get dimensions of an image
const imageDimensions = file =>
new Promise((resolve, reject) => {
const img = new Image()


// the following handler will fire after a successful loading of the image
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}


// and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
img.onerror = () => {
reject('There was some problem with the image.')
}
    

img.src = URL.createObjectURL(file)
})


// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
const [file] = files
 

try {
const dimensions = await imageDimensions(file)
console.info(dimensions)
} catch(error) {
console.error(error)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>


Select an image:
<input
type="file"
onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

小开

我认为这可能对一些在2019年使用Javascript和/或TypeScript的人有所帮助。

我发现以下内容，正如一些人所建议的那样，是不正确的：

let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

这是正确的：

let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

结论：

在onload函数中使用img，而不是this。

小开

假设，我们想要获得<img id="an-img" src"...">的图像尺寸

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("an-img");


console.log({
"naturalWidth": el.naturalWidth, // Only on HTMLImageElement
"naturalHeight": el.naturalHeight, // Only on HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});

自然尺寸

el.naturalWidth和el.naturalHeight将为我们获得自然尺寸，即图像文件的尺寸。

布局尺寸

el.offsetWidth和el.offsetHeight将为我们提供元素在文档上呈现的维度。

小开

当我们选择正确的文件时，只需传递输入元素获得的img文件对象，它将给出图像的高度和宽度

function getNeturalHeightWidth(file) {
let h, w;
let reader = new FileReader();
reader.onload = () => {
let tmpImgNode = document.createElement("img");
tmpImgNode.onload = function() {
h = this.naturalHeight;
w = this.naturalWidth;
};
tmpImgNode.src = reader.result;
};
reader.readAsDataURL(file);
}
return h, w;
}
小开

试试看

function sizes() {
console.log(`width: ${pic.width}, height:${pic.height}`);
}
<img id="pic" src="https://picsum.photos/300/150">
<button onclick="sizes()">show size</button>

小开

这是Node.js的另一个答案，这不太可能是OP的意思，但可能会派上用场，似乎在问题的范围内。

这是一个Node.js的解决方案，该示例使用Next.js框架，但可以与任何Node.js框架一起使用。它使用probe-image-size NPM包从服务器端解析图像属性。

示例用例：我使用下面的代码从Airtable自动化脚本解析图像的大小，该脚本调用我自己的analyzeImage API并返回图像的道具。

import {
NextApiRequest,
NextApiResponse,
} from 'next';
import probe from 'probe-image-size';


export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
try {
const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');


res.json(result);
} catch (e) {
res.json({
error: true,
message: process.env.NODE_ENV === 'production' ? undefined : e.message,
});
}
};


export default analyzeImage;

产量：

{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}
小开

也许这会帮助其他人。在我的情况下，我有一个File类型（保证是图像）&我想要图像维度而不将其加载到DOM上。

一般策略：将File转换为ArrayBuffer->将ArrayBuffer转换为base 64字符串->使用Image类将其用作图像源->使用naturalHeight和naturalWidth获取尺寸。

const fr = new FileReader();
fr.readAsArrayBuffer(image); // image the the 'File' object
fr.onload = () => {
const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;


// Convert to base64. String.fromCharCode can hit stack overflow error if you pass
// the entire arrayBuffer in, iteration gets around this
let binary = '';
const bytes = new Uint8Array(arrayBuffer);
bytes.forEach(b => binary += String.fromCharCode(b));
const base64Data = window.btoa(binary);


// Create image object. Note, a default width/height MUST be given to constructor (per
// the docs) or naturalWidth/Height will always return 0.
const imageObj = new Image(100, 100);
imageObj.src = `data:${image.type};base64,${base64Data}`;
imageObj.onload = () => {
console.log(imageObj.naturalWidth, imageObj.naturalHeight);
}
}

这允许你在不渲染的情况下从File中获取图像尺寸和长宽比。可以使用fromEvent轻松地将onload函数转换为RxJS Observables，以获得更好的异步体验：

// fr is the file reader, this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')
小开

我在jQuery的两分钱

免责声明：这并不一定回答这个问题，但拓宽了我们的能力。在jQuery 3.3.1中测试和工作

让我们考虑：

  1. 您有图像url/path，并且想要在不渲染DOM的情况下获取图像的宽度和高度，

  2. 在DOM上渲染图像之前，您需要将offsetP节点或图像div包装器元素设置为图像宽度和高度，以创建不同图像大小的流体包装器，即当单击按钮以在modal/light box上查看图像时

我将这样做：

// image path
const imageUrl = '/path/to/your/image.jpg'


// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
const realWidth = this.width;
const realHeight = this.height;
alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})
小开

要获得自然高度和宽度：

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;
<img src="img.png">

And if you want to get style height and width:

document.querySelector("img").offsetHeight;
document.querySelector("img").offsetWidth;

小开 
const file = event.target.files[0];
const img = new Image();
img.onload = function () {
width = img.width;
height = img.height;
};
img.src = URL.createObjectURL(file);
alert(width + "x" + height);

提交答案