Jquery JRAC获取坐标

Question

我一直在尝试2个小时，但我找不到一种方式来获得坐标 一旦我已经决定了裁剪的宽度和高度。 JRAC的文档也不好。 有没有人遇到宽度，高度，x，y的值？

Answer 1

您可以使用jrac同样具有例如，从文件 我只是添加jrac，并与多jQuery插件比较，因为jrac可以移动图像区域和那些jQuery插件不能

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']; 

         for (var i = 0; i < events.length; i++) { 
          var event_name = events[i]; 
          // Register an event with an element. 
          $viewport.observator.register(event_name, inputs.eq(i)); 
          // Attach a handler to that event for the element. 
          inputs.eq(i).bind(event_name, function (event, $viewport, value) { 
           $(this).val(value); 
          }) 
          // Attach a handler for the built-in jQuery change event, handler 
          // which read user input and apply it to 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 all 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>