1. 首先从官方网站上下载jcrop压缩包， 解压缩将js和css文件放入项目路径
http://deepliquid.com/content/Jcrop_Download.html
2. 代码实例：
<!DOCTYPE html>
<html>
<head>
<title>jcrop.html</title>
<link rel="stylesheet" href="jcrop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript"
src="C:\Users\Administrator\Desktop\jquery-1.9.0.js"></script>
<script type="text/javascript" src="jcrop/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(function() {
var jcrop_api,boundx,boundy,
$preview=$("#preview-pane");
$pcnt=$("#preview-pane .preview-container"),
$pimg=$("#preview-pane .preview-container img"),
xsize=$pcnt.width(),
ysize=$pcnt.height();
$("#target").Jcrop({
onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : xsize / ysize //aspectRatio表示纵横比，这里设置为图片容器节点的宽度和高度之比
}, function() {
var bounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
jcrop_api = this;
$("#preview-container").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>
</head>
<body>
<div id="select">
<img id="target" src="jcrop/1.jpg" />
</div>
<div id="preview-pane">
<!-- $pcnt, 这里style的宽和高将会被设置为截取的固定比例 -->
<div class="preview-container"
style="width:490px;height:420px;overflow:hidden">
<img src="jcrop/1.jpg" class="jcrop-preview" alt="Preview" />
</div>
</div>
</body>
</html>
3. 通过jquery自定义插件对其进行简单的封装
(function($){
$.fn.myJcrop=function(opts){
console.log($(this));
var jcrop_api,boundx,boundy,
$preview=$("#preview-pane"),
$pcnt=$("#preview-pane .preview-container"),
$pimg=$("#preview-pane .preview-container img"),
xsize=$pcnt.width(),
ysize=$pcnt.height();
var setting=$.extend({
onChange:updatePreview,
onSelect:updatePreview,
aspectRatio:xsize/ysize,
},opts||{});
$(this).Jcrop(setting,function(){
var bounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
jcrop_api = this;
$("#preview-container").appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
//让<img>节点发生改变，也就是预览图#preview节点
$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'
});
}
}
};
})(jQuery);
通过 $("#target").myJcrop({setSelect:[0,0,490,120]}); 即可完成调用
分享到：
相关推荐
这个实例将帮助开发者理解Jcrop的工作原理，并指导如何将其整合到自己的项目中。 首先，我们需要了解Jcrop的基本概念。Jcrop的核心功能是通过拖动选择框来指定图像的裁剪区域。用户可以选择任意大小和比例的区域，...
这个简单的例子让开发者对JCrop的基本使用有了初步认识。 **实例二：事件监听与响应** 第二个实例增加了事件监听，当用户操作选区时，JCrop会触发相应的事件，如`change`、`select`等。开发者可以注册事件处理器，...
“jcrop图片裁剪demo”是一个简单易用的Jcrop应用实例，它演示了如何在网页上集成图片裁剪功能。通过学习这个demo，开发者可以快速掌握Jcrop的基本用法，并将其应用到自己的项目中，提供用户友好的图片裁剪体验。...
本实例集Jcrop+swfupload两个强大的jquery功能于一体实现了上传图片自由截图。的asp.net实例，简单好学，是本人项目中的实例，看了网上写的太麻烦，自己写的。 Jcrop是一个jQuery插件，它能为你的WEB应用程序快速...
`setOptions()` 更新配置，`setSelect()` 创建或调整选区，`animateTo()` 实现动画效果，`release()` 取消选区，`disable()` 和 `enable()` 控制启用或禁用，以及`destroy()` 销毁Jcrop实例。 8. **API接口**：...
3. **多图裁剪**：可以同时对多张图片进行裁剪，只需为每张图片创建一个Jcrop实例。 4. **动画效果**：可以设置动画效果，如缓动效果，提升用户体验。 **四、Jcrop与后端交互** 1. **数据传输**：通过`...
jcrop插件是专为jQuery设计的一个实用工具，它提供了一个简单易用的接口，允许开发者在网页上实现图片裁剪功能。用户可以通过拖动和缩放来选择图片的特定部分进行裁剪。 ### jcrop的用法实例 要使用jcrop，首先...
在这个例子中，我们简单地裁剪了原始图像，并将其以JPEG格式返回给前端。实际应用中，你可能还需要考虑图像的保存、文件命名、错误处理等因素。 总结一下，Jcrop结合Java可以提供一个用户友好的图片裁剪解决方案。...
- 创建一个基本的Jcrop实例，包括HTML结构、CSS样式和JavaScript代码，演示如何实现一个简单的头像剪辑功能。 - 遵循最佳实践，展示如何处理异步上传裁剪后的图像，确保数据安全传输。 通过以上分析，我们可以...
当在页面中引入Jcrop的JavaScript和CSS文件后，我们可以通过调用$.Jcrop实例化对象来绑定到指定的图像元素上。例如： ```html $(document).ready(function(){ $('#target').Jcrop(); }); ``` 这段代码将在`...
jQuery图像照片剪裁插件Jcrop中文演示 静态演示页面 从最简单的开始 — 默认的行为表现 基本处理程序 — 基本形式的结合 锁定纵横比/剪裁效果图预览 — 不错的效果示例 设置/动画选择（初级API） — 动画演示 API...
Jcrop是一款开源的JavaScript图像裁剪库，它为网页应用提供了简单而强大的图片裁剪功能。本文将详细介绍Jcrop的使用方法、核心特性以及如何将其整合到项目中。 首先，Jcrop的名称来源于“JavaScript Crop”，...
此外，`jCrop` 还提供了一些高级 API，如创建多个实例、动态改变选区、设置裁剪框的形状等。 ### 结论 `jCrop` 是一个强大且易用的前端图片裁剪工具，只需简单几步就可以在项目中集成并使用。它提供了丰富的配置...
通过这个实例详解，我们可以看到PHP和JQueryJcrop结合使用，如何实现一个在Web界面上操作简单、功能强大的图片裁切功能。此功能非常适合于社交网络、在线相册、用户头像编辑等需要图片裁切功能的应用场景。
总的来说，SpringMVC结合Jcrop提供了一种简单易用的方式，允许用户在前端选择并裁剪图片，然后在后端处理这些裁剪信息，生成并保存裁剪后的图片。这种功能在许多Web应用中都很常见，比如头像上传、产品图片编辑等...
3. **多图裁剪**：可以同时对多个图片应用Jcrop，通过不同的实例管理。 4. **限制裁剪区域**：设置`minSize`、`maxSize`限制裁剪区域的最小和最大尺寸。 **服务器端处理** Jcrop只负责客户端的选取操作，实际的图片...
以下是一个简单的例子： ```java import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; public void cropImage(int x1, int y1, int w, int h,...
**页面图片裁切工具JSCrop** JSCrop是一款基于JavaScript的开源图片裁剪库，它允许用户在网页上自由地裁剪图片，为用户提供了一种...无论是简单的个人项目还是复杂的商业应用，JSCrop都能胜任并提供优秀的解决方案。