Maths - 计算调整大小的图像的新大小

即时通讯使用一些简单的数学来裁剪图像，即时通过使用jQuery imageareaselect.js插件在图像上绘制额外图层，我可以使用光标调整大小，然后单击按钮作物：Maths - 计算调整大小的图像的新大小

var div = $('.imgwrapper2'); 
    //image 
    div.css('background-image', 'url(' + bigimg + ')'); 
    //width 
    div.css('width', selection.x2 - selection.x1); 
    //height 
    div.css('height', selection.y2 - selection.y1); 
    //Position 
    div.css('background-position', -selection.x1 + 'px ' + -selection.y1 + 'px'); 
}

然后我用这些坐标来绘制一个新的div和图像设置为与相关背景的立场，即div的背景。像这样的东西：

<div class="imgwrapper2" style="background-image: url(&quot;http://farm6.static.flickr.com/5064/5618553713_96666c04e7.jpg&quot;); width: 368px; height: 345px; background-position: -81px -53px;"> 
</div>

这就是我的裁剪图像。

我想要做的就是调整此图片的大小，例如将大小增加20％或将大小缩小20％。

目前我正在使用静态版本来获得数学权利，重新计算使用绝对定位而不是背景位置使用div内的图像的大小。

这是在这里：http://jsfiddle.net/AtUmf/2/

我做什么是由20％乘以DIV大小，但如何计算图像中的DIV容器中的位置增加20％？

来源

2011-04-15 CLiown

在该试验中的情况下，这两个图像* *是完全相同的大小。你能澄清这一点吗？ – thirtydot 2011-04-15 13:00:36

是的，我不知道如何在保持定位正确的同时将图像尺寸增加20％。 – CLiown 2011-04-15 13:02:27

是否这样？

http://jsfiddle.net/AtUmf/6/

var zoomFactor = 1.2; 
var $img = $('#innerdiv2 img'); 

$img.css({ 
    width: $img.width() * zoomFactor, 
    height: $img.height() * zoomFactor, 
    left: parseInt($img.css('left'), 10) * zoomFactor, 
    top: parseInt($img.css('top'), 10) * zoomFactor, 
});

来源

2011-04-15 13:08:34 thirtydot

Maths - 计算调整大小的图像的新大小

回答

相关问题