Получить размер изображения из html

У меня есть два изображения в двух разных разделах и div. Я хочу получить исходное измерение в одно и то же время и отправить в файл сценария java для выполнения некоторых вычислений. Как получить размер изображения одновременно.Получить размер изображения из html

HTML файл

<section id ="hi"> 
<img src = "images/hi.png" onload = "OnImageLoad(event);" /> 
</section> 
<section id = "bye"> 
<img src = "images/hi.png" onload = "OnImageLoad(event);"/> 
</section>

function OnImageLoad(evt) { 

    var img = evt.currentTarget; 

    // what's the size of this image 
    var w = $(img).width(); 
    var h = $(img).height();

В этом коде я могу получить размер изображения образов, но они возвращают размер только один images.I хочет получить измерение обоих изображений одновременно.

Что-то вроде этого:

function OnImageLoad(evt) { 

     var img1 = evt.currentTarget; 
     var img2 = evt.currentTarget; 

     // what's the size of this image 
     var w1 = $(img1).width(); 
     var h1 = $(img1).height(); 

     var w2 = $(img2).width(); 
     var h2 = $(img2).height();

источник

2015-12-17 800i

function OnImageLoad() { 

     var img1 = document.getElementById("Image1"); 
     var img2 = document.getElementById("Image2"); 

     // what's the size of this image 
     var w1 = img1.width; 
     var h1 = img1.height; 

     var w2 = img2.width; 
     var h2 = img2.height; 
}

Html:

<section id ="hi"> 
<img id="Image1" src = "images/hi.png"/> 
</section> 
<section id = "bye"> 
<img id="Image2" src = "images/hi.png"/> 
</section>

Вызов этой функции на window.onload=OnImageLoad();

источник

2015-12-17 07:19:18 AkshayJ

Используйте 'window.onload = OnImageLoad' вместо .. – Rayon

Это должно быть сделано таким образом, как, как вы сделали Winn выполнить' OnImageLoad' twice..OP может не хотеть, чтобы это произошло .. – Rayon

Yup..got you mahn ..;) .. лучше назовите его на document.ready :) – AkshayJ

Вы не можете сделать это, они async задачи. Вы можете только рассчитать размер изображения только тогда, когда они полностью загружены, поэтому, если первое изображение имеет более высокий размер, то второе изображение, потребуется больше времени для вычисления первого размера изображения, а затем второго.

Что вы можете сделать, это получить оба размера изображения асинхронно, и когда оба они сделаны, вы можете выполнять вычисления.

var sizes = []; 
var counter = 0; 

function OnImageLoad(evt) { 

    var img = evt.currentTarget; 
    // what's the size of this image 
    var w = $(img).width(); 
    var h = $(img).height(); 
    counter++; 
    sizes.push({ 
     height: h, 
     width: w 
    }); 

    if (counter == 2) { 
     callAnotherFunction(sizes) 
    } 
}

источник

2015-12-17 07:20:19 void

Предполагая, что переменные с пользовательским значением должны сделать это возможным. HTML

<section id ="hi"> 
<img src = "images/hi.png" onload = "OnImageLoad(event,1);" /> 
</section> 
<section id = "bye"> 
<img src = "images/hi.png" onload = "OnImageLoad(event,2);"/> 
</section>

function OnImageLoad(evt, pre) { 

var img = evt.currentTarget; 

// what's the size of this image 
eval("var w" + pre + " = $(img).width()"); 
eval("var h" + pre + " = $(img).height()");

Ive не проверял это, хотя.

источник

2015-12-17 07:22:54 Perrykipkerrie

function OnImageLoad(evt) { 
 
    //This function will be called on each image load and will iterate all the image inside this dom 
 
    var images = $('img'); 
 
    for(var i =0 ;i<images.length; i++) { 
 
     // what's the size of this image 
 
     var w = $(images[i]).width(); 
 
     var h = $(images[i]).height(); 
 
    //For each file you will have width and height of the image 
 
    console.log('width of image-'+i+': ',w); 
 
    console.log('height of image-'+i+': ',h); 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-1.7.2.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<section id ="hi"> 
 
<img src = "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-green-orbs-icons-business/103491-3d-glossy-green-orb-icon-business-tool-screwdriver.png" onload = "OnImageLoad(event);" /> 
 
</section> 
 
<section id = "bye"> 
 
<img src = "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-orange-orbs-icons-business/105429-3d-glossy-orange-orb-icon-business-tool-hammer4-sc44.png" onload = "OnImageLoad(event);"/> 
 
</section> 
 
</body> 
 
</html>

enter link description here

источник

2015-12-17 09:19:43 SambitD

проблема с вашим решением в том, что в html присутствует много img.It gettng все img, и я не хочу этого. – 800i

@MarutiNandan, можете ли вы рассказать мне, какие изображения вы хотите? В вашем коде я нашел два изображения. поэтому я подумал, что может быть много изображений. вот почему я сделал этот родовой поиск для поиска всех изображений и получения их высоты и ширины. – SambitD

, пожалуйста, обратитесь к этому http://stackoverflow.com/questions/34333480/get-the-dimension-of-images-placed-beside-each-other-for-calculation. Вы поймете, что у – 800i

Получить размер изображения из html

ответ

Смежные вопросы