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 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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连接mysql数据库代码
2009/03/10 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php判断是否为json格式的方法
2014/03/04 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
在python中画正态分布图像的实例
2019/07/08 Python
np.dot()函数的用法详解
2020/01/17 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
C#笔试题集合
2013/06/21 面试题
平面设计岗位职责
2013/12/14 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang