hey guys i'm trying to get a preview image after it being cropped using this function...although its not displaying the cropped picture (preview)...i'm getting rather confused with all these co-ordinates etc and to be honest I'm slightly out of my depth here.
here is the function and my jsfiddle is here.
https://jsfiddle.net/destramic/52mL83pb/
- function preview(image, selected) {
var offset = image.position(),
image_x = offset.left,
image_y = offset.top,
image_x2 = image.width(),
image_y2 = image.height(),
offset = selected.position(),
selected_x = offset.left,
selected_y = offset.top,
selected_x2 = selected.width(),
selected_y2 = selected.height(),
preview_width = 100,
preview_height = 100,
scale_x = preview_width / selected_x2,
scale_y = preview_height / selected_y2;
$("#cropped-image").css({
width: Math.round(scale_x * image_x) + "px",
height: Math.round(scale_y * image_y) + "px",
marginLeft: "-" + Math.round(scale_x * selected_x) + "px",
marginTop: "-" + Math.round(scale_y * selected_y) + "px"
});
}
-
- preview($('#image-to-be-cropped'), $('.crop-container'));
the image in the fiddle is 1980 x 1200 although in the crop process i have resized to 500 x 500
can someone please help / advise me on how to get a preview of the crop please...thank you