jQuery Jcrop插件实现图片选取功能


Posted in Javascript onNovember 23, 2011

总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片。下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考。

1、在页面上加载原图

这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码
<img src="girl.jpg" alt="" id="TestImage" style="float: left;">

2、用矩形框在原图上选取区域

这个我们要用到一个jQuery插件Jcrop,感谢Jcrop,其项目页面地址:http://deepliquid.com/content/Jcrop.html,再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域,用来存放当前选取的顶点坐标及选取矩形的尺寸,再放一个保存按钮,点击保存按钮后将在服务器上保存切割后的图片。代码如下:

<form id="AvatarForm" action=""> 
<input id="x" name="x" type="hidden"> 
<input id="y" name="y" type="hidden"> 
<input id="w" name="w" type="hidden"> 
<input id="h" name="h" type="hidden"> 
<input class="input_btn" id="BtnSaveAvatar" value="确定保存" type="submit"> 
</form>

四个隐藏域分别表示x:左上顶点x坐标;y:左上顶点y坐标;w:选取矩形宽度;h:选取矩形长度。
然后我们调用插件,做好初始化工作,引入js和css文件:
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"src="js/Jcrop/js/jquery.Jcrop.js"></script> 
<link rel="stylesheet" href="js/Jcrop/css/jquery.Jcrop.css" type="text/css">

初始化原图的js代码:
$(document).ready(function(){ 
$('#TestImage').Jcrop({ 
onChange: updateCoords, 
onSelect: updateCoords 
}); 
$("#BtnSaveAvatar").click(function(){ 
$.ajax({ 
url:'Handler.ashx', 
data:{'x':$("#x").val(),'y':$("#y").val(),'w':$("#w").val(),'h':$("#h").val()}, 
datatype : "text/json", 
type:'post', 
success: function(o){ window.location.href="result.aspx?url="+o;} //成功后跳转到result页面查看切割后图片,把url 
}); 
return false; 
}); 
}); 
function updateCoords(c){ 
$('#x').val(c.x); 
$('#y').val(c.y); 
$('#w').val(c.w); 
$('#h').val(c.h); 
};

经过上述步骤,我们很高兴的看到一位美女出现在我们眼前,并任由我们选取任何部位,很刺激吧,由于demo在最后,先在这截一张效果图吧

jQuery Jcrop插件实现图片选取功能
3、服务器端切割图片并输出切割后的图片:
切割图片的主要类代码如下:

public class ImageCut 
{ 
///<summary> 
/// 剪裁 -- 用GDI+ 
///</summary> 
///<param name="b">原始Bitmap</param> 
///<param name="StartX">开始坐标X</param> 
///<param name="StartY">开始坐标Y</param> 
///<param name="iWidth">宽度</param> 
///<param name="iHeight">高度</param> 
///<returns>剪裁后的Bitmap</returns> 
public Bitmap KiCut(Bitmap b) 
{ 
if (b == null) 
{ 
return null; 
} int w = b.Width; 
int h = b.Height; 
if (X >= w || Y >= h) 
{ 
return null; 
} 
if (X + Width > w) 
{ 
Width = w - X; 
} 
if (Y + Height > h) 
{ 
Height = h - Y; 
} 
try 
{ 
Bitmap bmpOut = new Bitmap(Width, Height, PixelFormat.Format24bppRgb); 
Graphics g = Graphics.FromImage(bmpOut); 
g.DrawImage(b, new Rectangle(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel); 
g.Dispose(); 
return bmpOut; 
} 
catch 
{ 
return null; 
} 
} 
public int X = 0; 
public int Y = 0; 
public int Width = 120; 
public int Height = 120; 
public ImageCut(int x, int y, int width, int heigth) 
{ 
X = x; 
Y = y; 
Width = width; 
Height = heigth; 
} 
}

在Handler.ashx中,接收页面传递过来的切割图片的顶点坐标以及长宽尺寸,并调用C#图像切割类实现图片切割:
public void ProcessRequest (HttpContext context) { 
string xstr = context.Request["x"]; 
string ystr = context.Request["y"]; 
string wstr = context.Request["w"]; 
string hstr = context.Request["h"]; 
string sourceFile = context.Server.MapPath("girl.jpg"); 
string savePath = "CutImage/" + Guid.NewGuid() + ".jpg"; 
int x = 0; 
int y = 0; 
int w = 1; 
int h = 1; 
try 
{ 
x = int.Parse(xstr); 
y = int.Parse(ystr); 
w = int.Parse(wstr); 
h = int.Parse(hstr); 
} 
catch { } ImageCut ic = new ImageCut(x, y, w, h); 
System.Drawing.Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile)); 
string cutPath = context.Server.MapPath(savePath); 
cuted.Save(cutPath, System.Drawing.Imaging.ImageFormat.Jpeg); 
context.Response.Write(savePath); //输出保存的路径,以便页面端接收路径显示切割后的图片 
}

最后我们在Result.aspx页面上接收切割后的图片路径并显示切割后的图片:

<img src="<%=Request["url"] %>" alt="" />
好了,整个过程就完成了,为了大家能更好的参考学习,下面附上小demo,下载demo。

最后,你是否带走了我留下的这片云彩?请告诉我,我很期待你的答案。

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
js post提交调用方法
Feb 12 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
JQuery1.6 使用方法三
Nov 23 #Javascript
jQuery1.6 使用方法二
Nov 23 #Javascript
jQuery1.6 使用方法一
Nov 23 #Javascript
JS 表单验证大全
Nov 23 #Javascript
JavaScript中的16进制字符(改进)
Nov 21 #Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 #Javascript
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP 文件上传限制问题
2019/09/01 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
javascript Keycode对照表
2009/10/24 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
详解python开发环境搭建
2016/12/16 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python实现大量图片重命名
2020/03/23 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
logging level级别介绍
2020/02/21 Python
Django中使用Celery的方法步骤
2020/12/07 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
小学生手册家长评语
2014/04/16 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电