jQuery Jcrop 图像裁剪插件 API 示例

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" href="//ku.shouce.ren/libs/jcrop/css/jquery.Jcrop.css">
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/jcrop/js/jquery.Jcrop.min.js">
		</script>
	</head>
	<body>
		<div class="main">
			<div class="inwrap">
				<h1>jQuery Jcrop 图像裁剪插件
				</h1>
				<h2>API 示例
				</h2>
				<div class="example">
					<div class="clearfix">
						<div class="left">
							<img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" id="target" alt="[Jcrop Example]">
						</div>
						<div class="left ml">
							<fieldset>
								<div class="button_group clearfix">
									<button id="setSelect" class="button green">设置裁剪框
									</button>
									<button id="animateTo" class="button green">动画效果设置
									</button>
									<button id="release" class="button green">释放裁剪框
									</button>
								</div>
								<div class="button_group clearfix">
									<button id="disable" class="button green">禁用裁剪框
									</button>
									<button id="enable" class="button green">启用裁剪框
									</button>
								</div>
								<div class="button_group clearfix">
									<button id="unhook" class="button green">销毁 Jcrop
									</button>
									<button id="rehook" class="button green">使用 Jcrop
									</button>
								</div>
							</fieldset>
							<fieldset>
								<legend>选项
								</legend>
								<div>
									<input type="checkbox" class="checkbox" id="can_click">
									<label for="can_click">允许新的裁剪框
									</label>
								</div>
								<div>
									<input type="checkbox" class="checkbox" id="can_move">
									<label for="can_move">允许移动裁剪框
									</label>
								</div>
								<div>
									<input type="checkbox" class="checkbox" id="can_size">
									<label for="can_size">允许调整裁剪框尺寸
									</label>
								</div>
								<div>
									<input type="checkbox" class="checkbox" id="ar_lock">
									<label for="ar_lock">设置比例
									</label>
								</div>
								<div>
									<input type="checkbox" class="checkbox" id="size_lock">
									<label for="size_lock">设置最大尺寸和最小尺寸
									</label>
								</div>
							</fieldset>
							<fieldset>
								<legend>更换图片
								</legend>
								<div class="btn-group button_box">
									<button class="button orange" id="img2">Pool
									</button>
									<button class="button orange active" id="img1">Sago
									</button>
									<button class="button orange" id="img3">Sago w/ outerImage
									</button>
								</div>
							</fieldset>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			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){
					$(this).addClass('active').closest('.btn-group')
						.find('button.active').not(this).removeClass('active');
					jcrop_api.setImage('https://ku.shouce.ren/libs/jcrop/img/sago.jpg');
					jcrop_api.setOptions({
						bgOpacity: .6
					}
										);
					return false;
				}
								);
				$('#img2').click(function(e){
					$(this).addClass('active').closest('.btn-group')
						.find('button.active').not(this).removeClass('active');
					jcrop_api.setImage('https://ku.shouce.ren/libs/jcrop/img/pool.jpg');
					jcrop_api.setOptions({
						bgOpacity: .6
					}
										);
					return false;
				}
								);
				$('#img3').click(function(e){
					$(this).addClass('active').closest('.btn-group')
						.find('button.active').not(this).removeClass('active');
					jcrop_api.setImage('https://ku.shouce.ren/libs/jcrop/img/sago.jpg', function(){
						this.setOptions({
							bgOpacity: 1,
							outerImage: 'https://ku.shouce.ren/libs/jcrop/img/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>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="//ku.shouce.ren/libs/jcrop/css/jquery.Jcrop.css">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/jcrop/js/jquery.Jcrop.min.js">
        </script>
    </head>
    <body>
        <div class="main">
            <div class="inwrap">
                <h1>jQuery Jcrop 图像裁剪插件
                </h1>
                <h2>API 示例
                </h2>
                <div class="example">
                    <div class="clearfix">
                        <div class="left">
                            <img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" id="target" alt="[Jcrop Example]">
                        </div>