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 相关文章推荐
二级域名转向类
Nov 09 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 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程序实现支持页面后退的两种方法
2008/06/30 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
Python+Django搭建自己的blog网站
2018/03/13 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
pandas取出重复数据的方法
2019/07/04 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
绩效考核实施方案
2014/03/18 职场文书
奥运会口号
2014/06/13 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
服务承诺书
2015/01/19 职场文书
建国大业电影观后感
2015/06/01 职场文书