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中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
react 父子组件之间通讯props
Sep 08 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
bootstrap实现tab选项卡切换
Aug 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
用PHP读取IMAP邮件
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python操作redis的方法
2015/07/07 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
北京SQL新华信咨询
2016/09/30 面试题
法律专业自我鉴定
2013/10/03 职场文书
前台文员的岗位职责
2013/11/14 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
商务宴会祝酒词
2015/08/11 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Python获取字典中某个key的value
2022/04/13 Python
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python