image - Jquery JRAC get coordinates -


i've been trying 2 hours can't find way coordinates once have settled on cropped width , height. docs jrac not either. have experiencing getting values width,height,x,y?

you can use jrac same example document add jrac , compare multi jquery plugin because jrac can move image area , jquery plugin can not

jquery

$('.imagearea img').jrac({                     'crop_width': parseint(math.round(cusw / 4) + 4),                     'crop_height': parseint(math.round(cush / 4) + 4),                     'crop_left': 0,                     'crop_top': 0,                     'zoom_min': 0,                     'zoom_max': 0,                     'zoom_label': '',                     'viewport_onload': function () {                         $viewport = this;                         var inputs = $("div.coords").find("input[type=text]");                         var events = ['jrac_crop_x', 'jrac_crop_y', 'jrac_crop_width', 'jrac_crop_height', 'jrac_image_width', 'jrac_image_height'];                          (var = 0; < events.length; i++) {                             var event_name = events[i];                             // register event element.                             $viewport.observator.register(event_name, inputs.eq(i));                             // attach handler event element.                             inputs.eq(i).bind(event_name, function (event, $viewport, value) {                                 $(this).val(value);                             })                             // attach handler built-in jquery change event, handler                             // read user input , apply relevent viewport object.                             .change(event_name, function (event) {                                 var event_name = event.data;                                 $viewport.$image.scale_proportion_locked = $("div.coords").find("input[type=checkbox]").is(':checked');                                 $viewport.observator.set_property(event_name, $(this).val());                             })                         }                     }                 })                 // react on viewport events.                 .bind('jrac_events', function (event, $viewport) {                     //check image crop box valid                     if (parseint($("#cropx").val()) > -1 && parseint($("#cropy").val()) > -1) {                         //set background                         $("#cropw").css('background-color', 'chartreuse');                         $("#croph").css('background-color', 'chartreuse');                     } else {                         //set background                         $("#cropw").css('background-color', 'salmon');                         $("#croph").css('background-color', 'salmon');                     }                 }); 

html

<div class="coords">                     <input id="cropx" type="text" value="" style="display: none;" />                     <input id="cropy" type="text" value="" style="display: none;" />                     <input id="cropw" type="text" value="" style="display: none;" />                     <input id="croph" type="text" value="" style="display: none;" />                     <input type="checkbox" checked="checked" style="display: none;" />                 </div> 

Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

php - joomla get content in onBeforeCompileHead function -