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

标签: jcrop 功能 图像 | 发表时间:2013-12-05 19:33 | 作者:u010363836
出处:http://blog.csdn.net

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

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

在<HEAD>你需要加载必要文件的页面 这包括:
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子:

<script src="js/jquery.min.js"> </ SCRIPT>
<script src="js/jquery.Jcrop.min.js"> </ SCRIPT>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

入门第一个简单点的Demo:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script>
   	jQuery(function(){
			jQuery('#user_preview_img').Jcrop({
				trackDocument: true
			});
		});
</script>
</head>
<body>
    <img alt="" src="images/area1/1.jpg" id="user_preview_img">
</body>
</html>

效果图:


jcrop简单的事件处理Demo:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<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);
};
</script>
</head>
<body>
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
    
    	<form onsubmit="return false;" class="coords">
			<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
			<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
			<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
			<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
			<label>W <input type="text" size="4" id="w" name="w" /></label>
			<label>H <input type="text" size="4" id="h" name="h" /></label>
		</form>
    
</body>
</html>

效果图:


jcrop实例演示Demo3:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<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);
};
</script>
</head>
<body>
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
    
    	<form onsubmit="return false;" class="coords">
			<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
			<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
			<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
			<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
			<label>W <input type="text" size="4" id="w" name="w" /></label>
			<label>H <input type="text" size="4" id="h" name="h" /></label>
		</form>
    
</body>
</html>

效果图:


Jcrop实例Demo4:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
  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'
        });
      }
    };

  });


</script>


<style type="text/css">
/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 250px;
  height: 170px;
  overflow: hidden;
}
</style>

</head>
<body>
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
    
   <div id="preview-pane">
    <div class="preview-container">
      <img src="images/area1/1.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
</body>
</html>

效果图:


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

jQuery(function(){ 
}); 
全写为 
jQuery(document).ready(function(){  
}); 

作者:u010363836 发表于2013-12-5 11:33:24 原文链接
阅读:112 评论:0 查看评论

相关 [jcrop 功能 图像] 推荐:

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

- - CSDN博客Web前端推荐文章
Jcrop是一个功能强大的图像裁剪引擎jQuery的. 它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性(或编码,测试和调试的星期). Jcrop还设有干净,组织良好的代码,在大多数现代的web浏览器效果很好. 在你需要加载必要文件的页面 这包括:.

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

- - JavaScript - Web前端 - ITeye博客
Jcrop是一个功能强大的图像裁剪引擎jQuery的. 它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性(或编码,测试和调试的星期). Jcrop还设有干净,组织良好的代码,在大多数现代的web浏览器效果很好. 在你需要加载必要文件的页面 这包括:.

jQuery图片剪裁插件 Jcrop

- - 博客园_首页
Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能. 对所有图片均unobtrusively(无侵入的,保持DOM简洁). 支持 minSize / maxSize设置. 支持改变选区或移 动选区时的回调(Callback). 通过API创建互 动,比如动画效果.

Photoshop将加入图像去模糊功能

- Lee Jia - Solidot
在上周洛杉矶举行的Adobe MAX 2011会议上,Adobe演示了下一代Photoshop的高级图像去模糊功能. 如果照片被拍的很模糊,该功能将使用先进算法计算导致模糊的相机抖动,然后对照片进行精确的去模糊.

函数图像(二)

- DreamToTrue - C++博客-λ-calculus(惊愕到手了欧耶)
    今天终于把雏形给做出来了. 主要的方法是牛顿迭代法,把屏幕上的所有点都收敛到函数图像上面. 为了提速,我是用了ThreadTool.QueueUserWorkItem和Parallel.For,还把那颗函数的语法树用Linq.Expression编译成了机器码. 下面的这些图都是二十秒钟左右就可以画出来的了.

BTrace功能

- - zzm
       在生产环境中可能经常遇到各种问题,定位问题需要获取程序运行时的数据信息,如方法参数、返回值、全局变量、堆栈信息等. 为了获取这些数据信息,我们可以 通过改写代码,增加日志信息的打印,再发布到生产环境. 通过这种方式,一方面将增大定位问题的成本和周期,对于紧急问题无法做到及时响应;另一方面重新部 署后环境可能已被破坏,很难重新问题的场景.

DTU 功能 - wilcolin

- - 博客园_首页
      DTU (Data Transfer unit)全称数据传输单元,是专门用于将串口数据转换为IP数据或将IP数据转换为串口数据通过无线通信网络进行传送的无线终端设备.       Winer WCTU 3121主要是运用于物联网通信行业的一种无线数据传输终端,是厦门为那通信科技有限公司自主开发的DTU系列产品之一,WCTU 3121是一款2G GPRS DTU产品,通过利用中国移动、中国联通的GPRS 2G网络为用户提供无线长距离的数据传输功能.

是包包还是图像?

- Kidwind - 玩意儿
看起来它就像是一个画上去的图,眼睛被完全欺骗了,它们本身就是真正的包包. 设计师先在图上画好插图,然后制作成立体形式的包包,来以真乱假. 本文原始链接:http://www.cngadget.cn/jump-from-paper.html.

html5 canvas 图像处理

- - HTML5研究小组
前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理,在此稍稍交代一下. 与matlab处理图像类似的是,这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像,(0,0)表示图像的左上角位与canvas画布的位置.

Java图像处理库 Sanselan

- - 编程语言 - ITeye博客
Sanselan 是一个纯 Java 的图形库,可以读写各种格式的图像文件,包括快速解析图片信息例如大小/颜色/icc以及元数据等. 尽管因为是Java开发的,在处理速度上会稍微慢一 些,但具备良好的可移植性. 虽然尚未发布1.0 版本,但是已经有多个项目在使用 Sanselan 来处理图像文件. 该项目目前还是 Apache 组织的一个孵化项目.