带设置参数的Jcrop
带设置参数的Jcrop
提问于 2013-02-05 15:38:02
我使用提交表单将图片的名称和大小类型发送到php文件，其中我在it.What上使用jcrop，我想要的是使用Jcrop的教程nr5中的"selection can be moved“选项(并禁用其他选项)，jcrop字段的大小由表单发送的size参数设置。有人是Jcrop的专家吗？因为我是个新手，不懂代码。请帮帮忙。
if( (isset($_POST['tip_imagine']))&&(isset($_POST['alt-rol'])) ){
$num=$_POST['alt-rol'];
$size=$_POST['tip_imagine'];
if($size==0){
$width=400;
$height=118;
}
if($size==1){
$width=500;
$height=400;
}
if($size==2){
$height=200;
$width=188;
}
if($size==3){
$height=195;
$width=340;
}
if($size==4){
$width=500;
$height=400;
}
if($size==5){
$width=1280;
$height=800;
}
}
?>
<html>
<head>
<link rel="stylesheet" href="/css/admin_tools.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="/javascript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
// The variable jcrop_api will hold a reference to the
// Jcrop API once Jcrop is instantiated.
var jcrop_api;
// In this example, since Jcrop may be attached or detached
// at the whim of the user, I've wrapped the call into a function
initJcrop();
// The function is pretty simple
function initJcrop()//{{{
{
// Hide any interface elements that require Jcrop
// (This is for the local user interface portion.)
$('.requiresjcrop').hide();
// Invoke Jcrop in typical fashion
$('#target').Jcrop({
onRelease: releaseCheck
},function(){
jcrop_api = this;
jcrop_api.animateTo([100,100,400,300]);
// Setup and dipslay the interface for "enabled"
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
$('.requiresjcrop').show();
});
};
//}}}
// Use the API to find cropping dimensions
// Then generate a random selection
// This function is used by setSelect and animateTo buttons
// Mainly for demonstration purposes
function getRandom() {
var dim = jcrop_api.getBounds();
return [
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1]),
Math.round(Math.random() * dim[0]),
Math.round(Math.random() * dim[1])
];
};
// This function is bound to the onRelease handler...
// In certain circumstances (such as if you set minSize
// and aspectRatio together), you can inadvertently lose
// the selection. This callback re-enables creating selections
// in such a case. Although the need to do this is based on a
// buggy behavior, it's recommended that you in some way trap
// the onRelease callback if you use allowSelect: false
function releaseCheck()
{
jcrop_api.setOptions({ allowSelect: true });
$('#can_click').attr('checked',false);
};
// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
// Sets a random selection
jcrop_api.setSelect(getRandom());
});
$('#animateTo').click(function(e) {
// Animates to a random selection
jcrop_api.animateTo(getRandom());
});
$('#release').click(function(e) {
// Release method clears the selection
jcrop_api.release();
});
$('#disable').click(function(e) {
// Disable Jcrop instance
jcrop_api.disable();
// Update the interface to reflect disabled state
$('#enable').show();
$('.requiresjcrop').hide();
});
$('#enable').click(function(e) {
// Re-enable Jcrop instance
jcrop_api.enable();
// Update the interface to reflect enabled state
$('#enable').hide();
$('.requiresjcrop').show();
});
$('#rehook').click(function(e) {
// This button is visible when Jcrop has been destroyed
// It performs the re-attachment and updates the UI
$('#rehook,#enable').hide();
initJcrop();
$('#unhook,.requiresjcrop').show();
return false;
});
$('#unhook').click(function(e) {
// Destroy Jcrop widget, restore original state
jcrop_api.destroy();
// Update the interface to reflect un-attached state
$('#unhook,#enable,.requiresjcrop').hide();
$('#rehook').show();
return false;
});
// Hook up the three image-swapping buttons
$('#img1').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img2').click(function(e) {
jcrop_api.setImage('demo_files/pool.jpg');
jcrop_api.setOptions({ bgOpacity: .6 });
return false;
});
$('#img3').click(function(e) {
jcrop_api.setImage('demo_files/sago.jpg',function(){
this.setOptions({
bgOpacity: 1,
outerImage: 'demo_files/sagomod.jpg'
});
this.animateTo(getRandom());
});
return false;
});
// The checkboxes simply set options based on it's checked value
// Options are changed by passing a new options object
// Also, to prevent strange behavior, they are initially checked
// This matches the default initial state of Jcrop
$('#can_click').change(function(e) {
jcrop_api.setOptions({ allowSelect: !!this.checked });
jcrop_api.focus();
});
$('#can_move').change(function(e) {
jcrop_api.setOptions({ allowMove: !!this.checked });
jcrop_api.focus();
});
$('#can_size').change(function(e) {
jcrop_api.setOptions({ allowResize: !!this.checked });
jcrop_api.focus();
});
$('#ar_lock').change(function(e) {
jcrop_api.setOptions(this.checked?
{ aspectRatio: 4/3 }: { aspectRatio: 0 });
jcrop_api.focus();
});
$('#size_lock').change(function(e) {
jcrop_api.setOptions(this.checked? {
minSize: [ 80, 80 ],
maxSize: [ 350, 350 ]
}: {
minSize: [ 0, 0 ],
maxSize: [ 0, 0 ]
});
jcrop_api.focus();
});
});
</script>回答 3
Stack Overflow用户
发布于 2014-09-03 14:36:26
在jcrop.js文件中设置以下内容：
allowSelect: false,
allowMove: true,
allowResize: false,在第页上：
jQuery(function($) {
$('#selectedimage').Jcrop({
setSelect:[ 275,60,50,15 ]
});
});您可以更改setselect中的值，选定区域的大小也会相应更改。
Stack Overflow用户
发布于 2013-02-05 17:58:54
至少部分找到了答案:我已经编辑了jquery.Jcrop.js文件，所以在加载时，allowSelect和allowResize的默认值将为false。
// Basic Settings
allowSelect: false,
allowMove: true,
allowResize: false,Stack Overflow用户
发布于 2014-09-05 04:54:26
对于那些通过谷歌搜索“jcrop api焦点不起作用”的人来说
一定要先调用api.enable()！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14702345
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号