Question

我在两个不同的部分和div中有两个图像。我想同时获取原始维度并发送到我的java脚本文件进行一些计算。如何同时获取图像尺寸。

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>

JS

function OnImageLoad(evt) {

    var img = evt.currentTarget;

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

在这段代码中，我能够获得图像的图像尺寸，但它们仅返回一个图像的尺寸。我想同时获得两个图像的尺寸。

这样的事情：

 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();

Answer 1

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();

上调用此功能

Answer 2

你不能这样做，他们是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)
    }
}

Answer 3

使用自定义值预先设置变量应该可以实现。 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>

JS

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()");

我没有测试过这个。

Answer 4

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

从html获取图像尺寸

4 个答案: