Jquery图像的自然宽度

时间:2015-10-28 18:03:25

标签: javascript jquery

我需要向我的服务器发送一个乘数,以便我可以正确管理我的图像。客户端可以上传图像,并且onload我想立即找出自然宽度和客户端宽度之间的差异。图像位于350px的容器中,图像设置为min-width: 100%;我在下面尝试过,奇怪的是它工作了几次。

当我运行它时,我得到一个正确的naturalWidth,但clientWidth是0.

以下是jcrop的方法。还有一些功能可以获得自然宽度和客户端宽度。

$('#target').Jcrop({
            onChange : updatePreview,
            onSelect : updatePreview,
            aspectRatio : xsize / ysize
        }, function() {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;

            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });

        function updatePreview(c) {

            $('#xmargin').val(Math.round(c.x));
            $('#ymargin').val(Math.round(c.y));
            $('#x2').val(Math.round(c.w));
            $('#y2').val(Math.round(c.h));

            var clientW = document.getElementById("target").clientWidth;
            var naturalW = document.getElementById("target").naturalWidth; 

            var multiply = naturalW/clientW;

            $('#multiply1').val(clientW); //Returns 0
            $('#multiply2').val(naturalW); //Returns correct value

            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;

                $pimg.css({
                    width : Math.round(rx * boundx) + 'px',
                    height : Math.round(ry * boundy) + 'px',
                    marginLeft : '-' + Math.round(rx * c.x) + 'px',
                    marginTop : '-' + Math.round(ry * c.y) + 'px'
                });
            }
        }

0 个答案:

没有答案