JCrop是一个基本JQuery的图像裁剪插件,其主页在此
。关于JCrop的使用主页上中丰富的例子,这里要实际图片上传及裁剪的功能。
第一步,实现图片上传,上传完成时页面不能刷新。通常不刷新页面会使用AJAX技术,但是AJAX不能发送multipart/form-data格式的数据,这时就只能使用iframe了,可以参见这篇文章
。
<div id="avator-croper">
<div>
<!-- upload form -->
<form id="upload-form" target="upload_target" method="post" action="/uploadAvator">
<input type="file" name="file" /> <input type="submit" id='upload-avator' value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="" style="display:none"></iframe>
</div>
<div id="crop-area" style="display: none">
<div>
<img id="cropbox" src="" /> <!-- original image -->
</div>
<div style="width: 150px; height: 150px; overflow: hidden; margin-left: 5px; margin-top: 10px">
<img id="preview" src=""> <!-- preview image -->
</div>
</div>
<div>
<form action="/cropAvator" method="post">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<button type="submit" id="submit-avatar">Crop Image</button>
</form>
</div>
</div>
上面的HTML分为三部分,第一部分定义了图片上传的form和一个隐藏的iframe,form的target定义成iframe的id。第二部分是图片的裁剪及预览区域。第三部分是定义裁剪区域参数,包括裁剪区域左上角位置、裁剪区域宽度和高度,确认裁剪时这些参数需要传递到服务器端。下面是处理图片上传的JavaScript代码,它处理了iframe的onload事件。
$('#upload-form').submit(function(e) {
$('#upload_target').one('load', function() {
var ret = $('body', frames['upload_target'].document).html();
var data = eval("(" + ret + ")");
if (data.Status == 'OK') {
var imageUrl = data.ImageUrl;
// ...
} else {
alert("Upload Failed!");
}
});
});
其中省略的代码是交由JCrop处理的部分,其主要内容是设置待裁剪和预览图片的src属性,并调用JCrop方法。
if (data.Status == 'OK') {
var imageUrl = data.ImageUrl;
$('#cropbox').attr('src', imageUrl);
$('#preview').attr('src', imageUrl);
$("#cropbox").Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
$('#crop-area').show();
}
showPreview函数如下:
function showPreview(coords) {
var rx = 150 / coords.w;
var ry = 150 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
$('#x').val(coords.x);
$('#y').val(coords.y);
$('#w').val(coords.w);
$('#h').val(coords.h);
};
用户选择裁剪区域并点击确定按钮后,选择区域参数传给服务器,并返回裁剪后的图片URL,并更新avator,也使用AJAX完成。
$('#submit-avatar').click(function(e) {
e.preventDefault();
var form = $(this).closest('form');
$.ajax({
type: 'POST',
url: form.attr('action'),
dataType: 'json',
data: form.serialize(),
success: function(data) {
if (data.Status == 'OK') {
$('#avatar-image').attr('src', data.ImageUrl);
} else {
alert("Server Error!");
}
}
});
});
分享到:
相关推荐
Jcrop是一款基于jQuery的开源图片裁剪插件,它提供了简单易用的API,使得开发者能够轻松地在网页中实现按比例或自由裁剪图片的功能。本文将详细介绍Jcrop的特性、使用方法以及如何通过其提供的示例快速上手。 首先...
- **图片裁剪服务**:提供一个简单的图片裁剪工具,用户可以快速地调整和裁剪图片。 - **屏幕截图**:虽然Jcrop本身不直接支持屏幕截图,但可以结合其他截图库,让用户选择截取屏幕的特定部分。 总的来说,jQuery ...
《使用Jcrop进行图片裁剪的深度解析》 在网页应用中,经常需要对上传的图片进行裁剪,以满足特定尺寸或者比例的要求。Jcrop是一款强大的JavaScript图像裁剪工具,它提供了简单易用的API,使用户能够在浏览器端轻松...
jcrop是一款开源的JavaScript组件,它提供了一种直观且易于使用的界面,让用户能够通过鼠标操作在网页上选择图片的特定区域进行裁剪。该库支持多种浏览器,包括Chrome、Firefox、Safari、Edge等,兼容性良好。 2. ...
Jcrop是一款广泛使用的JavaScript图像裁剪工具,它允许用户在网页上交互式地选择和裁剪图片。这个“jcrop图片裁剪demo”是展示如何集成和应用Jcrop的一个实例,方便开发者快速理解和使用。下面将详细介绍Jcrop的核心...
3. **服务器端处理**: 虽然Jcrop提供了前端的裁剪功能,但实际保存裁剪结果通常需要在服务器端进行,例如使用PHP、Node.js等后端技术处理裁剪参数,生成新的图片文件。 4. **安全考虑**: 在处理用户上传的图片时,应...
在本项目中,“PHP+jQuery+jCrop裁剪头像”是一个常见的在线图像处理应用场景,用于让用户自定义上传的头像尺寸,以满足特定的显示需求。以下是对该项目中涉及的关键技术点的详细解释: 1. **PHP**:PHP(Hypertext...
在本文中,我们将深入探讨如何使用Jcrop实现剪切上传图片以及相关的操作实例。 首先,Jcrop是基于jQuery库的,因此在使用Jcrop之前,你需要确保你的项目中已经引入了jQuery。你可以通过CDN或者本地文件的方式引入...
上述代码中,`#target`是待裁剪图片的ID,`Jcrop();`是初始化Jcrop的函数,通过jQuery选择器将Jcrop应用到指定的图片元素上。 Jcrop提供了一些关键配置选项,以满足不同需求。例如,你可以设置选区的最小和最大尺寸...
`jCrop` 是一个基于 jQuery 的强大图片裁剪插件,它允许用户在浏览器端选择并裁剪图像,然后将这些裁剪信息发送到服务器进行进一步处理。在这个项目中,`jCrop` 被用来配合 PHP 完成图片的上传和剪切功能。 1. **...
$('#target').Jcrop({ minSize: [190,190], //边框最小尺寸 //maxSize:[190,190], setSelect: [0,0,170,230], //创建边框参数【x,y,x1,y1】 onChange: updatePreview, //边框改变时发生的事件 onSelect: ...
这个"java+jq+jcrop缩放裁剪上传图片"的主题涵盖了三个关键部分:Java后端处理、jQuery(jq)前端交互以及Jcrop图像裁剪库的使用。下面将详细解释这三个方面的知识点。 首先,让我们来看看前端部分。jQuery(jq)是...
struts2+jsp+jquery+Jcrop实现图片裁剪并上传, 参照http://blog.csdn.net/csd_xuming/article/details/8848939 的有效实现实例
Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端选择并定义感兴趣的图像区域,然后将这些坐标信息传递给后端进行精确的图片裁剪。在本示例中,我们将深入探讨如何结合Jcrop与Java技术,实现一个完整的...
Jcrop是一款广泛应用于网页开发中的JavaScript图像裁剪库,它允许用户在网页上交互式地选取图像的矩形区域,通常用于实现头像上传、图片预览或自定义尺寸截图等功能。这款工具的核心是其JavaScript代码,通过与HTML...
Jcrop是一款强大的JavaScript图片裁剪库,它允许用户在前端自由地选择和裁剪图片,广泛应用于网页中的图片预览、上传前的裁剪等场景。这款工具以其直观的用户界面和灵活的配置选项,深受开发者喜爱。 **一、Jcrop...
Jcrop 是一个基于 jQuery 的 JavaScript 图像裁剪插件,它允许用户在网页上选择并裁剪图像,常用于图片上传前的预览和编辑。这个插件为开发者提供了丰富的功能,包括动态调整选区、比例锁定、多边形裁剪等,极大地...
在IT行业中,图片处理是一项常见的需求,特别是在网页和应用程序中,用户可能需要上传并裁剪图片以满足特定的尺寸或比例。Jcrop是一款强大的JavaScript库,专门用于图像选择和裁剪,它允许用户通过浏览器直接操作...