Jcrop是一个功能强大的图像裁剪引擎 - JAVA

Jcrop是一个功能强大的图像裁剪引擎jQuery的。

它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性（或编码，测试和调试的星期）。Jcrop还设有干净，组织良好的代码，在大多数现代的web浏览器效果很好。

在你需要加载必要文件的页面这包括：
jQuery库
Jcrop的java script
Jcrop CSS样式表
它应该是这个样子：

<script src="js/jquery.min.js"> 
  
<script src="js/jquery.Jcrop.min.js">

入门第一个简单点的Demo:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




  
Insert title here

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
<script src="js/jquery.Jcrop.min.js">

  
<script>
   	jQuery(function(){
			jQuery('#user_preview_img').Jcrop({
				trackDocument: true
			});
		});

效果图：

jcrop简单的事件处理Demo:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




  
Insert title here

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
<script src="js/jquery.Jcrop.min.js">

  
<script>
jQuery(document).ready(function(){

	jQuery('#user_preview_img').Jcrop({
		onChange: showCoords,
		onSelect: showCoords
	});

});

// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
	jQuery('#x1').val(c.x);
	jQuery('#y1').val(c.y);
	jQuery('#x2').val(c.x2);
	jQuery('#y2').val(c.y2);
	jQuery('#w').val(c.w);
	jQuery('#h').val(c.h);
};



   
  
   
  
    
    	
  
			
   X1 
			
   Y1 
			
   X2 
			
   Y2 
			
   W 
			
   H

效果图：

jcrop实例演示Demo3：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




  
Insert title here

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
<script src="js/jquery.Jcrop.min.js">

  
<script>
jQuery(document).ready(function(){

	jQuery('#user_preview_img').Jcrop({
		  onChange: showCoords,
		  onSelect: showCoords,
          bgColor: 'red',
          bgOpacity: .4,
          setSelect: [ 100, 100, 50, 50 ],
          aspectRatio: 16 / 9
	});

});

// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
	jQuery('#x1').val(c.x);
	jQuery('#y1').val(c.y);
	jQuery('#x2').val(c.x2);
	jQuery('#y2').val(c.y2);
	jQuery('#w').val(c.w);
	jQuery('#h').val(c.h);
};



   
  
   
  
    
    	
  
			
   X1 
			
   Y1 
			
   X2 
			
   Y2 
			
   W 
			
   H

效果图：

Jcrop实例Demo4:< http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here <script src="http://code.jquery.com/jquery-1.10.1.min.js"> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> <script src="js/jquery.Jcrop.min.js"> <script type="text/java 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]); $('#user_preview_img').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' }); } }; });

html>
效果图:

注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如"红'，'＃CCC“，”RGB（10,10,10）'）
数值，包括小数点，不应该被引用。
setSelect带有一个数组，这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项