jQuery Jcrop 图像裁剪插件按高宽比例预览裁剪效果

实例代码“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">
		<style>
			.jcrop-holder #preview-pane {
				background-color: white;
				border: 1px solid rgba(0, 0, 0, 0.4);
				border-radius: 6px;
				box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
				display: block;
				padding: 6px;
				position: absolute;
				right: -280px;
				top: 0;
				z-index: 2000;
			}
			#preview-pane .preview-container {
				height: 170px;
				overflow: hidden;
				width: 250px;
			}
			.button.active {
				opacity: 0.6;
			}
		</style>
		<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>Aspect Ratio with Preview Pane 按高宽比例预览裁剪效果
				</h2>
				<div class="detail">
					<p>模拟实时预览裁剪效果的示例
					</p>
					<p>很直观的例子，使用 Jcrop 的 
						<code>onChange
						</code> 事件，实时更新裁剪后的图像预览。这种形式适合用于创建略缩图或头像。
					</p>
				</div>
				<div class="example">
					<img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" id="target" alt="[Jcrop Example]">
					<div id="preview-pane">
						<div class="preview-container">
							<img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" class="jcrop-preview" alt="Preview">
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			jQuery(function($){
				// Create variables (in this scope) to hold the API and image size
				var jcrop_api,
					boundx,
					boundy,
					// Grab some information about the preview pane
					$preview = $('#preview-pane'),
					$pcnt = $('#preview-pane .preview-container'),
					$pimg = $('#preview-pane .preview-container img'),
					xsize = $pcnt.width(),
					ysize = $pcnt.height();
				console.log('init',[xsize,ysize]);
				$('#target').Jcrop({
					onChange: updatePreview,
					onSelect: updatePreview,
					aspectRatio: xsize / ysize
				}
								   ,function(){
					// Use the API to get the real image size
					var bounds = this.getBounds();
					boundx = bounds[0];
					boundy = bounds[1];
					// Store the API in the jcrop_api variable
					jcrop_api = this;
					// Move the preview into the jcrop container for css positioning
					$preview.appendTo(jcrop_api.ui.holder);
				}
								  );
				function updatePreview(c){
					if (parseInt(c.w) > 0) {
						var rx = xsize / c.w;
						var ry = ysize / c.h;
						$pimg.css({
							width: Math.round(rx * boundx) + 'px',
							height: Math.round(ry * boundy) + 'px',
							marginLeft: '-' + Math.round(rx * c.x) + 'px',
							marginTop: '-' + Math.round(ry * c.y) + 'px'
						}
								 );
					}
				};
			}
				  );
		</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">
        <style>
            .jcrop-holder #preview-pane {
                background-color: white;
                border: 1px solid rgba(0, 0, 0, 0.4);
                border-radius: 6px;
                box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
                display: block;
                padding: 6px;
                position: absolute;
                right: -280px;
                top: 0;
                z-index: 2000;
            }
            #preview-pane .preview-container {
                height: 170px;
                overflow: hidden;
                width: 250px;