As a .NET MVC4 developer, I have successfully created an image upload and crop application using code from deepliquid.com. However, I am struggling with the JavaScript aspect of it. The current code constrains proportions for the image cropping feature, but I want to modify it so that it doesn't constrain proportions while still retaining the preview functionality.
<script type="text/javascript">
jQuery(function ($) {
// Define variables for API and image size
var jcrop_api,
boundx,
boundy,
// Get information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
**aspectRatio: xsize / ysize**
}, function () {
// Use the API to determine 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) {
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'
});
}
};
});
</script>