JQuery JCrop - Cách đặt vùng chọn kích thước cố định?

Question

Tôi đang cố gắng tìm ra cách khắc phục kích thước hộp chọn trong JCrop. Tài liệu hướng dẫn cách đặt vùng chọn ban đầu nhưng không làm cách nào để đặt kích thước cố định. Có ai biết làm thế nào tôi có thể làm cho nó cố định. Cảm ơn trước.

http://deepliquid.com/content/Jcrop_Manual.html

Answer 1

Sử dụng this example bạn sẽ có thể để giữ cho kích thước cố định.

$(function(){ 
    $('#jcrop_target').Jcrop({ 
     onChange: function(){ $(this).setSelect([x, y, x2, y2]); } 
    }); 
}); 

Answer 2

Bạn có thể sử dụng tùy chọn aspectRatio. Điều này sẽ buộc một vùng chọn hình vuông

$(function(){ 
    $('#cropbox').Jcrop({ 
     aspectRatio: 1 
    }); 
}); 

Hoặc co: 16/9 sẽ làm cho nó rộng sreeen :-)

Answer 3

Bạn đang tìm kiếm cơ bản phần API. Sau khi sử dụng rộng rãi plugin này bản thân mình, tôi biết chính xác những gì bạn đang tìm kiếm:

var api; 
var cropWidth = 100; 
var cropHeight = 100; 

$(window).load(function() { 

    // set default options 
    var opt = {}; 

    // if height and width must be exact, dont allow resizing 
    opt.allowResize = false; 
    opt.allowSelect = false; 

    // initialize jcrop 
    api = $.Jcrop('#objectId', opt); 

    // set the selection area [left, top, width, height] 
    api.animateTo([0,0,cropWidth,cropHeight]); 

    // you can also set selection area without the fancy animation 
    api.setSelect([0,0,cropWidth,cropHeight]); 

}); 

Answer 4

bạn có thể thiết lập các co như giá trị thập phân

$('#jcrop_target').Jcrop({ 
    setSelect: [0,0,150,100], 
    aspectRatio: 150/100 
}); 

Answer 5

Hi này có thể hữu ích -

<script> 
$(window).load(function() { 
    var jcrop_api; 
    var i, ac; 

    initJcrop(); 

    function initJcrop() { 
      jcrop_api = $.Jcrop('#imgCrop', { 
      onSelect: storeCoords, 
      onChange: storeCoords 
      }); 
      jcrop_api.setOptions({ aspectRatio: 1/ 1 }); 
      jcrop_api.setOptions({ 
      minSize: [180, 180], 
      maxSize: [180, 250] 
     }); 
     jcrop_api.setSelect([140, 180, 160, 180]); 
    }; 
    function storeCoords(c) { 
    jQuery('#X').val(c.x); 
    jQuery('#Y').val(c.y); 
    jQuery('#W').val(c.w); 
    jQuery('#H').val(c.h); 
    };   
}); 
</script> 

Answer 6

aspectRatio: 1, 
minSize: [ 100, 100 ], 
maxSize: [ 100, 100 ] 

Answer 7

Thật dễ dàng ...

allowResize: false 

ví dụ:

$(function(){ 
    $("#CropSource").Jcrop({ 
     aspectRatio: 1, 
     setSelect: [50, 0, 300,300], 
     allowResize: false 
    }); 
});