over 9 years ago
FrontEnd:
Include jquery.Jcrop.css, jquery.Jcrop.js and jquery.Jcrop.min.js
Open an image in a div with a form. Take 4 hidden input fields:
- <input type="hidden" id="x" name="x" /> // x coordinate of the image
- <input type="hidden" id="y" name="y" /> // y coordinate of the image
- <input type="hidden" id="w" name="w" /> // width of the specified rectangular region
- <input type="hidden" id="h" name="h" /> // height of the specified rectangular region
<input type="hidden" id="x" name="x" /> // x coordinate of the image <input type="hidden" id="y" name="y" /> // y coordinate of the image <input type="hidden" id="w" name="w" /> // width of the specified rectangular region <input type="hidden" id="h" name="h" /> // height of the specified rectangular region
Call the function on defining the cropped image
- $('.cropbox').Jcrop({
- trueSize: [width, height],
- onSelect : function setCoordinates(c) {
- $('#x').val(frm.x);
- $('#y').val(frm.y);
- $('#w').val(frm.w);
- $('#xh).val(frm.h);
- }
- });
$('.cropbox').Jcrop({ trueSize: [width, height], onSelect : function setCoordinates(c) { $('#x').val(frm.x); $('#y').val(frm.y); $('#w').val(frm.w); $('#xh).val(frm.h); } });
Here trueSize: [width, height] will help in maintaining the original height, width of the image (since on UI we may need to show the image in an small size)
BackEnd:
Save subimage to DB.
0 Comment(s)