无法在 Firefox 中测量 Html-Image 的客户端宽度

Question

我正在尝试在图像的兴趣点 (poi) 上放置标记。这些兴趣点已在不同的软件中设置并存储在数据库中。该位置由它们相对于原始图像的像素位置确定。在我的网络应用程序中，由于 panzoom.js（我认为与我的问题无关的插件），图像被缩小了。我得到了缩放标记位置的正确公式，唯一的问题是：在 firefox 中，我无法及时读取图像大小（在 Chrome 中这不是问题）。这是代码

$(document).ready(function ()
    {
        var imagectrl = document.getElementById('<%= img.ClientID %>');
        var hiddenfield = document.getElementById('<%= hf.ClientID %>');

        if (hiddenfield.value == "")
        {
            var myWidth;
            var myHeight;
            myWidth = imagectrl.clientWidth;
            myHeight = imagectrl.clientHeight;

            hiddenfield.value = myWidth + ';' + myHeight;
            __doPostBack();
        }
    });

如果我手动执行回发（单击以更高质量显示图像的按钮），则会正确写入尺寸。

当我的 X 或 Y 为 0 时，我也尝试从代码后面调用相同的函数，但没有任何效果。

第一次加载页面时如何获取图片大小？

Answer 1

Firefox 在异步操作（如图像加载）上的实现与Chrome 不同。我想这可能是为什么在 Chrome 中您可以使用 $(document).ready 立即访问图像，但在 Firefox 中图像源在之后加载文档的原因就绪 - 因此 clientWidth 和 clientHeight 将是未定义的。

解决方案： 在图像上定义一个 onload event handler 并将逻辑放入该方法中：

$(document).ready(function ()
{
    var imagectrl = document.getElementById('<%= img.ClientID %>');
    var hiddenfield = document.getElementById('<%= hf.ClientID %>');

    imagectrl.onload = function() {
        if (hiddenfield.value == "")
        {
            var myWidth;
            var myHeight;
            myWidth = imagectrl.clientWidth;
            myHeight = imagectrl.clientHeight;

            hiddenfield.value = myWidth + ';' + myHeight;
            __doPostBack();
        }
    }
});

Answer 2

我找到了一个解决方案：无论我做什么，图像本身都无法及时测量。所以我通过 CSS 为图像提供了它周围控件的高度并使用了

AddHandler dvGalerieFill.Load, AddressOf Me.measure_height

在Page_Load方法中对周围控件的加载做出反应。在 "measure_height" 中，我调用了我的 Javascript 函数。通过控件的高度（这是我图像的高度）我可以用相同的系数计算图像的宽度，因为高度和宽度重新缩放。

无法在 Firefox 中测量 Html-Image 的客户端宽度

Can't measure Clientwidth of Html-Image in Firefox

html

vb.net

firefox

web-applications

image-size