JQuery JCrop - Как установить область выбора фиксированного размера?
Пытаюсь понять, как исправить размер поля выбора под JCrop. В документации упоминается, как установить начальную область выбора, но не как сделать ее фиксированным размером. Кто-нибудь знает, как я могу это исправить. Заранее спасибо.
Ответы 7
Используя этот пример, вы сможете сохранить фиксированный размер.
$(function(){
$('#jcrop_target').Jcrop({
onChange: function(){ $(this).setSelect([x, y, x2, y2]); }
});
});
Это кажется довольно хакерским способом установки области обрезки фиксированного размера путем принудительного изменения размера после того, как событие изменения закончилось.
Вы можете использовать параметр aspectRatio. Это приведет к выделению квадрата
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1
});
});
Или аспектное соотношение: 16/9 сделало бы его широким :-)
Квадрат - это не то же самое, что фиксированный размер.
Затем он должен использовать что-то вроде minSize: [100, 150], maxSize: [100, 150] deepliquid.com/content/Jcrop_Manual.html Указание одинаковых размеров для min и max.
Вы в основном ищете раздел API. Я сам активно использовал этот плагин, поэтому точно знаю, что вы ищете:
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]);
});
Я обнаружил, что эта демонстрация довольно хорошо демонстрирует полный набор функций jCrop.
@Corey Ballou, можем ли мы добавить прямоугольник или любую другую форму с помощью JCROP js?
вы можете установить соотношение сторон как десятичное значение
$('#jcrop_target').Jcrop({
setSelect: [0,0,150,100],
aspectRatio: 150/100
});
Привет, это может быть полезно -
<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>
aspectRatio: 1,
minSize: [ 100, 100 ],
maxSize: [ 100, 100 ]
Это замечательно просто ...
allowResize: false
например
$(function(){
$("#CropSource").Jcrop({
aspectRatio: 1,
setSelect: [50, 0, 300,300],
allowResize: false
});
});
Я бы предпочел использовать фиксированное соотношение сторон и изменить размер на стороне сервера.