[Java教程]Jcrop简单实用

0 2014-05-06 12:00:10

今天有一个项目的功能需求 “在上传照片的时候能进行裁剪”，网上找了下，发现有Jcrop这款插件，自己试了下，感觉很不错，蛮好用的。又能增加用户体验，测试了兼容性也很好，所以在这里分享下

首先，可以到官网上下载这款插件 htttp://www.jquery.com ,下载后有需要的话可以看下里面的demo

在项目中，只要在head中引用

前台页面，要加上4个隐藏域，分别记录剪切后的x,y坐标和长，宽。附上代码

接着实例化Jcrop

之后看下运行效果图

好了，效果出来了，然后要保存截取后的图片了，这样在刚刚的脚本中可以看到用ajax提交到Handler.ashx上去处理，附上代码

public void ProcessRequest(HttpContext context) { //接收位置x,y。 //接收长宽w,h。 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("gq_nav.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); //输出保存的路径，以便页面端接收路径显示切割后的图片 }

在Handler.ashx中可以看到生成新的图片是交给ImageCut这个类去做的，这里也附上代码

public class ImageCut{ /// /// 剪裁 -- 用GDI+ /// ///原始Bitmap ///开始坐标X ///开始坐标Y ///宽度 ///高度 ///剪裁后的Bitmap 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; }}

这样就可以实现在线剪裁图片的效果了。因为觉得这款插件还算不错，所以特此分享下，希望大师们不要取笑，如果哪位有更好的建议或其他类似的插件，也希望

能分享给小弟。

另：附上这个插件的属性allowSelecttrue允许新选框

allowMovetrue允许选框移动

allowResizetrue允许选框缩放

trackDocumenttrue

baseClass“jcrop”基础样式名前缀。说明：class=”jcrop-holder”，更改的只是其中的 jcrop。

addClassnull添加样式。例：假设值为 “test”，那么会添加样式到

bgColor“black”背景颜色。颜色关键字、HEX、RGB 均可。

bgOpacity0.6背景透明度

bgFadefalse使用背景过渡效果

borderOpacity0.4选框边框透明度

handleOpacity0.5缩放按钮透明度

handleSize9缩放按钮大小

handleOffset5缩放按钮与边框的距离

aspectRatio0选框宽高比。说明：width/height

keySupporttrue支持键盘控制。按键列表：上下左右(移动)、Esc(取消)、Tab(跳出裁剪框，到下一个)

cornerHandlestrue允许边角缩放

sideHandlestrue允许四边缩放

drawBorderstrue绘制边框

dragEdgestrue允许拖动边框

fixedSupporttrue

touchSupportnull

boxWidth0画布宽度

boxHeight0画布高度

boundary2边界。说明：可以从边界开始拖动鼠标选择裁剪区域

fadeTime400过度效果的时间

animationDelay20动画延迟

swingSpeed3过渡速度

minSelect[0,0]选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择

maxSize[0,0]选框最大尺寸

minSize[0,0]选框最小尺寸

onChangefunction(){}选框改变时的事件

onSelectfunction(){}选框选定时的事件

onReleasefunction(){}取消选框时的事件

API 接口

名称说明setImage(string)设定(或改变)图像。例：jcrop_api.setImage(“newpic.jpg”)

setOptions(object)设定(或改变)参数，格式与初始化设置参数一样

setSelect(array)创建选框，参数格式为：[x,y,x2,y2]

animateTo(array)用动画效果创建选框，参数格式为：[x,y,x2,y2]

release()取消选框

disable()禁用 Jcrop。说明：已有选框不会被清除。

enable()启用 Jcrop

destroy()移除 Jcrop

tellSelect()获取选框的值(实际尺寸)。例子：console.log(jcrop_api.tellSelect())

tellScaled()获取选框的值(界面尺寸)。例子：console.log(jcrop_api.tellScaled())

getBounds()获取图片实际尺寸，格式为：[w,h]

getWidgetSize()获取图片显示尺寸，格式为：[w,h]

getScaleFactor()获取图片缩放的比例，格式为：[w,h]

本文网址：http://www.shaoqun.com/a/90434.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0