无法获得图像高度，而是获得自然高度

Question

我正在编写一个简单的处理程序，在上传之前显示图像预览。下面是我的示例代码:

function subscribeImageShower() {
    $('input[type="file"][data-image-show]')
        .each(function() {
            var $input = $(this);
            var $img = $($input.data('image-show'));
            var selectCallback = window[$input.data('image-selected')];
            var unselectCallback = window[$input.data('image-unselected')];
            $(this)
                .on('change reset',
                    function() {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function(event) {
                                $img.attr('src', event.target.result);
                                $img.show();
                                if (selectCallback) {
                                    $img.one('load', selectCallback);
                                }
                            };
                            reader.readAsDataURL(this.files[0]);
                        } else {
                            $img.removeAttr('src');
                            $img.hide();
                            if (unselectCallback) {
                                unselectCallback($img[0]);
                            }
                        }
                    });
        });
}

标记:

<div class="modal-body">
    <div id="logoCanvasDiv">
        <img id="logoSampleImg" width="350" style="position: absolute;"/>
        <canvas id="logoCanvas" width="350" style="border: thick; position: absolute"></canvas>
    </div>
    <div>
        <input type="file" name="modelFile" data-image-show="#logoSampleImg" data-image-selected="onLogoSelected" data-image-unselected="onLogoUnselected"/>
        <input type="hidden" name="objectId" value="@Model.PageObject.Id" hidden />
    </div>
</div>

在选择回调中我想要得到图像的宽度和高度:

function onLogoSelected(event) {
   var img = event.target;
   alert('jQuery height = ' + $(img).height());
   alert('DOM height = ' + img.height);
}

对于以下示例中宽度为800x600的图像，我分别得到0和600。但过了一段时间，我得到了实际的图像大小- 350x263。

为什么我得到这样的无效信息?我怎么能得到图像大小后，它完全加载?我订阅了load事件，但似乎不起作用。

如何复制:选择一个文件-它被正确加载。取消选择文件。然后再次选择。现在height无效

Answer 1

我找到了一个答案，我没有发布整个回调文本，这是一个问题:

function onLogoSelected(event) {
    var img = event.target;
    console.log(img.height);
    $('#logoCanvasDiv')
        .css({
            'width': img.width,
            'height': img.height,
            'margin-bottom': 10,
            'position': 'relative'
        })
        .show();
};
function onLogoUnselected() {
    $('#logoCanvasDiv').hide();
};

父div是隐藏的，当图像加载，这就是为什么它设置高度为0。

解决方案:只要确保所有的父元素是可见的，当你加载图像