Question

我使用一些简单的数学来裁剪图像，我使用jQuery imageareaselect.js插件在图像上绘制一个额外的图层，我可以使用光标调整大小，然后单击按钮进行裁剪：

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/

我所做的是将DIV尺寸乘以20％，但如何计算DIV容器中图像位置增加20％？

Answer 1

喜欢这个吗？

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,
});

数学 - 计算出调整大小的图像的新大小

1 个答案: