javascript - img 标签宽度错误

Question

我尝试为我的应用程序构建一个图像 uploader 。所以我需要调整图像的大小。但我经常在 img 标签中得到错误的宽度值。不是每次。但有时当我加载图片 3 次时，或者有时如果我更改图片，则会出现旧的宽度。但也不是每次都如此。

$(document).on('pageshow', '#profil', function () {
    $('#content').height(getRealContentHeight());

    var max_height = getRealContentHeight();
    var max_width = $(window).width();

    var username = getUrlParameter('user');
    var data;
    var x, y, w, h;
    var preview;
    var reader;
    var pic = document.getElementById('pic');


    var jcrop_api;
    $('#upload').bind("change", function () {
        preview = new Image();
        var file = document.querySelector('input[type=file]').files[0];   
        reader = new FileReader();
        reader.onloadend = function () {
            if (jcrop_api) {
                jcrop_api.setImage(reader.result);
            }

            preview.src = reader.result;

            document.getElementById('pic').src = preview.src;

            alert(pic.height); //there is the false value...sometimes....
            alert(pic.width);
            var size = calculateAspectRatioFit(pic.width, pic.height, max_width, max_height);
            alert("heigth:" + size.height);
            alert("width:" + size.width);
//            document.getElementById('pic').height = size.height;
//            document.getElementById('pic').width = size.width;
            jQuery(function ($) {
                $('#pic').Jcrop({
                    aspectRatio: 1,
                    minSize: [50, 50],
                    maxSize: [300, 300],
                    onChange: showCoords,
                    onSelect: showCoords
                }, function () {
                    jcrop_api = this;
                });
            });
            function showCoords(c) {
                x = c.x;
                y = c.y;
                w = c.w;
                h = c.h;
            };
            function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

                var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

                return {width: srcWidth * ratio, height: srcHeight * ratio};
            }

        };
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    });
    $('#continue').bind("click", function () {
       //ajax upload
    });
});

Answer 1

可能是两个问题之一:

1) 您是否在 css 或内联中设置“#pic”元素的高度或宽度尺寸？您可能正在获取元素的尺寸，而不是图像的尺寸。

2) 您正在此 img 上设置“src”，但不等到图像加载。您可以尝试:

$("#pic").on("load", function() {
    //get dimensions now
});

是否必须显示图像？否则你可以使用 js 加载它:

var img = new Image();

然后按照上面的方法使用 jQuery load 事件处理程序。然后设置:

img.src = 'image url';