Currently, I am implementing a basic mathematical method to crop an image. My approach involves utilizing the jQuery plugin called imageareaselect.js to overlay an adjustable layer on top of an image. By resizing this layer with the cursor and clicking a button, the cropping process is initiated:
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');
}
The next step involves using these coordinates to generate a new div container and assign the cropped image as its background, adjusting the necessary position values accordingly. An example of this would be:
<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>
Now that the image has been cropped, I aim to resize it by either increasing or decreasing its size by 20%.
Initially, I am focusing on a static version to accurately calculate the required dimensions for resizing. This involves placing an image within a div container using absolute positioning instead of background-position. The working model can be viewed here: http://jsfiddle.net/AtUmf/2/
To achieve a 20% increase in size, I have multiplied the sizes of the div container. However, my current challenge lies in determining how to calculate the corresponding 20% adjustment for the image's position within the DIV container.