Respostas:
Você pode obter programaticamente a imagem e verificar as dimensões usando Javascript ...
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
Isso pode ser útil se a imagem não fizer parte da marcação.
clientWidth e clientHeight são propriedades DOM que mostram o tamanho atual no navegador das dimensões internas de um elemento DOM (excluindo margem e borda). Portanto, no caso de um elemento IMG, isso obterá as dimensões reais da imagem visível.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
$.fn.width
e $.fn.height
.
document.getElementById
é mais longo para digitar, mas 10 vezes mais rápido que $('#...')[0]
.
Além disso (além das respostas de Rex e Ian), há:
imageElement.naturalHeight
e
imageElement.naturalWidth
Eles fornecem a altura e a largura do próprio arquivo de imagem (e não apenas o elemento da imagem).
Se você estiver usando o jQuery e solicitando tamanhos de imagem, terá que esperar até que eles sejam carregados ou você receberá apenas zeros.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Eu acho que uma atualização para essas respostas é útil porque uma das respostas mais votadas sugere o uso de clientWidth
clientHeight, que agora acho obsoleto.
Fiz algumas experiências com o HTML5, para ver quais valores realmente são retornados.
Antes de tudo, usei um programa chamado Dash para obter uma visão geral da API da imagem. Ele afirma que height
e width
são a altura / largura renderizada da imagem e que naturalHeight
enaturalWidth
são a altura / largura intrínseca da imagem (e são apenas HTML5).
Usei uma imagem de uma linda borboleta, de um arquivo com altura 300 e largura 400. E esse Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Então eu usei esse HTML, com CSS embutido para altura e largura.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Resultados:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Alterei o HTML para o seguinte:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
ou seja, usando atributos de altura e largura em vez de estilos embutidos
Resultados:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
Alterei o HTML para o seguinte:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
ou seja, usando atributos e CSS, para ver o que tem precedência.
Resultados:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Usando o JQuery, você faz isso:
var imgWidth = $("#imgIDWhatever").width();
width
e height
do img
elemento.
O que todos os outros esqueceram é que você não pode verificar o tamanho da imagem antes de carregá-la. Quando o autor verifica todos os métodos publicados, provavelmente funcionará apenas no host local. Como o jQuery pode ser usado aqui, lembre-se de que o evento 'ready' é acionado antes do carregamento das imagens. $ ('# xxx'). width () e .height () devem ser disparados no evento onload ou posterior.
Você realmente pode fazer isso usando um retorno de chamada do evento load, pois o tamanho da imagem não é conhecido até que o carregamento seja realmente concluído. Algo como o código abaixo ...
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';
Com jQuery biblioteca-
Use .width()
e .height()
.
Mais em largura jQuery e altura jQuery .
$(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>
ok pessoal, acho que aprimorei o código-fonte para poder deixar a imagem carregar antes de tentar descobrir suas propriedades, caso contrário, ele exibirá '0 * 0', porque a próxima instrução teria sido chamada antes do carregamento do arquivo o navegador. Requer 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']);
}
Supondo que queremos obter as dimensões da imagem de <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
});
Dimensões naturais
el.naturalWidth
e el.naturalHeight
nos dará as dimensões naturais , as dimensões do arquivo de imagem.
Dimensões do layout
el.offsetWidth
e el.offsetHeight
obterá as dimensões nas quais o elemento é renderizado no documento.
Você pode ter uma função simples como a seguinte ( imageDimensions()
) se não tem medo de usar promessas .
// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
const img = new Image()
// the following handler will fire after the successful parsing 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>
Achei que isso poderia ser útil para alguns que estão usando Javascript e / ou texto datilografado em 2019.
Achei o seguinte, como alguns sugeriram, incorreto:
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";
Isto está correto:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";
Conclusão:
Use img
, não this
, em onload
função.
Recentemente, tive o mesmo problema por um erro no controle deslizante flexível. A altura da primeira imagem foi ajustada menor devido ao atraso no carregamento. Tentei o seguinte método para resolver esse problema e ele funcionou.
// 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';
Isso fornecerá a altura em relação à largura definida em vez da largura original ou Zero.
Você também pode usar:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Nicky De Maeyer perguntou após uma imagem de fundo; Eu simplesmente o pego no css e substituo o "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()));
}
s.substr(4,s.length-5)
, é, pelo menos, mais fácil sobre os olhos;)
Você pode aplicar a propriedade onload handler quando a página carregar em js ou jquery desta forma: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Simplesmente, você pode testar assim.
<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>
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 ...
é importante remover a configuração interpretada pelo navegador da div pai. Então, se você quiser a largura e a altura reais da imagem, basta usar
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
Este é um exemplo do projeto TYPO3, onde preciso das propriedades reais da imagem para dimensioná-la com a relação correta.
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.
Este é o meu método, espero que seja útil. :)
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]);
}
este trabalho para visualização e upload de várias imagens. se você precisar selecionar para cada uma das imagens uma a uma. Em seguida, copie e cole em toda a função de visualização da imagem e valide !!!
basta passar o objeto img que é obtido pelo elemento input quando selecionamos o arquivo correto, ele fornecerá a altura e a largura netural da imagem
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;
}