javascript - 显示图像预览 + 显示尺寸

Question

我正在尝试向我的网站添加图像裁剪器，同时在发送图像进行裁剪时发送图像尺寸进行处理。我可以让图像显示在预览框中，但我无法让 javascript 输出图像尺寸。

我的脚本是:

<script type="text/javascript">

        function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("id_avatar").files[0]);

            oFReader.onload = function (oFREvent) {
                document.getElementById("avatar_preview").src = oFREvent.target.result;

            };

            var imgheight;
            var imgwidth;

            function getDimensions() {
                imgheight = image.height; 
                imgwidth = image.width;
                document.getElementById('image_dimension').value = ('The image size is ' + imgwidth + ' x ' + imgheight );
            };

            var image = new Image();
            image.src = document.getElementById('avatar_preview').src;
            image.onload = getDimensions();

        };

    </script>

还有我的 HTML:

<input type='file' id='id_avatar' name='avatar' onchange="PreviewImage();" /><br />

<div id="parent" style="width: 300px; height: 300px; overflow: hidden;">
    <img id="avatar_preview" src="#" alt="your image" style="width:400px;" />
</div>

<input type='text' id='image_dimension' name='image_dimension' />

此代码在 image_dimension 文本字段中显示“此图像为 0 x 0”。

Answer 1

您的路径是正确的，但您需要使用 Image 对象。 而不是

var image = document.getElementById('avatar_preview').src;

你应该这样做

var image = new Image();
image.src = document.getElementById('avatar_preview').src;

最后，您应该保持 onload 回调不变。

作为旁注，您应该插入此行

document.getElementById('image_dimension').value = ('The image size is ' + imgwidth + ' x ' + imgheight );

在图像异步加载时的回调函数内。

查看 How to get image size (height & width) using JavaScript? 和 https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image