设置参数的 Jcrop
Posted
技术标签:
【中文标题】设置参数的 Jcrop【英文标题】：Jcrop with set parameters 【发布时间】：2013-02-05 07:38:01 【问题描述】：我使用提交表单将图片的名称和大小类型发送到我使用 jcrop 的 php 文件。我想要的是使用 Jcrop 教程 nr5 中的“可以移动选择”选项（并禁用其他选项）并且 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>
【问题讨论】：
【参考方案1】：在 jcrop.js 文件中设置以下内容：
allowSelect: false,
allowMove: true,
allowResize: false,
在页面上：
jQuery(function($)
$('#selectedimage').Jcrop(
setSelect:[ 275,60,50,15 ]
);
);
您可以更改 setselect 中的值，所选区域的大小将相应更改。
【讨论】：
【参考方案2】：至少部分找到答案：我已经编辑了 jquery.Jcrop.js 文件，因此在加载时，allowSelect 和 allowResize 的默认值为 false。
// Basic Settings
allowSelect: false,
allowMove: true,
allowResize: false,
【讨论】：
【参考方案3】：对于任何通过谷歌搜索“jcrop api focus not working”的人
请务必先致电api.enable()！
【讨论】：
以上是关于设置参数的 Jcrop的主要内容，如果未能解决你的问题，请参考以下文章
jQuery：jCrop 'setSelect' 根本没有设置？