Im using some simple maths to crop an image, im using the jQuery imageareaselect.js plugin to draw an additional layer over an image which i can resize with the cursor and then click a button to crop:
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');
}
I then use those coordinates to draw a new div and set the image as the background of that div with the relevant background position. Something like this:
<div class="imgwrapper2" style="background-image: url("http://farm6.static.flickr.com/5064/5618553713_96666c04e7.jpg"); width: 368px; height: 345px; background-position: -81px -53px;">
</div>
So thats my cropped image.
What I'd now like to do is resize this image, for instance increase the size by 20% or reduce the size by 20%.
Im working on a static version at the moment to get the mathematics right to recalculate the size which just uses an image inside of a div using absolute positioning instead of background-position.
This is here: http://jsfiddle.net/AtUmf/2/
What I've done is multiply the DIV sizes by 20%, but how do I calculate th开发者_StackOverflow中文版e 20% increase for the position of the image in the DIV container?
Like this?
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,
});
精彩评论