JQuery JCrop - 如何设置固定大小的选择区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/346045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery JCrop - How to set a fixed size selection area?
提问by user43092
I'm trying to figure out how to fix the selection box size under JCrop. The documentation mentions how to set an initial selection area but not how to make it fixed size. Does anybody knows how could I make it fixed. Thanks in advance.
我想弄清楚如何修复 JCrop 下的选择框大小。该文档提到了如何设置初始选择区域，但没有提到如何使其固定大小。有谁知道我怎么能把它修好。提前致谢。
回答by Corey Ballou
You are basically looking for the API section. Having extensively used this plugin myself, I know exactly what you're looking for:
您基本上是在寻找 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]);
});
回答by tuffkid
you can set the aspectRatio as decimal value
您可以将宽高比设置为十进制值
$('#jcrop_target').Jcrop({
setSelect: [0,0,150,100],
aspectRatio: 150/100
});
回答by The Disintegrator
You can use the aspectRatio option. This will force a square selection
您可以使用 aspectRatio 选项。这将强制进行方形选择
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1
});
});
Or aspectRatio: 16/9 would make it wide sreeen :-)
或者 aspectRatio: 16/9 会使其变宽 :-)
回答by muhuk
Using this exampleyou should be able to keep the size fixed.
使用此示例，您应该能够保持大小固定。
$(function(){
$('#jcrop_target').Jcrop({
onChange: function(){ $(this).setSelect([x, y, x2, y2]); }
});
});
回答by CyberJunkie
aspectRatio: 1,
minSize: [ 100, 100 ],
maxSize: [ 100, 100 ]
回答by WalterEgo
It's remarkably easy...
这非常容易......
allowResize: false
e.g.
例如
$(function(){
$("#CropSource").Jcrop({
aspectRatio: 1,
setSelect: [50, 0, 300,300],
allowResize: false
});
});
回答by Vipul Pawsakar
Hi this might be helpful -
嗨，这可能会有所帮助 -
<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>
