Question

我尝试为我的应用构建图片上传器。所以我需要调整图像大小。但是我经常在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

您可以尝试以下方法：

$("#pic").height();
$("#pic").width();
$("#pic").outerHeight();
$("#pic").outerWidth();

而不是：

pic.height
pic.width

看到适合的那个？

Answer 2

可能是两个问题之一：

1）您是以css还是内联设置'#pic'元素的高度或宽度尺寸？您可能正在获取元素的尺寸，而不是图像的尺寸。

2）你在这个img上设置'src'但不等到图像加载完毕。你可以试试：

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

您是否必须显示图像？否则你可以使用：

在js中加载它

var img = new Image();

然后在上面使用jQuery load事件处理程序。然后设置：

img.src = 'image url';

错误的img标签宽度

2 个答案: