我需要向我的服务器发送一个乘数,以便我可以正确管理我的图像。客户端可以上传图像,并且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'
});
}
}