[Java教程]Jcrop简单实用
0 2014-05-06 12:00:10
今天有一个项目的功能需求 “在上传照片的时候能进行裁剪”,网上找了下,发现有Jcrop这款插件,自己试了下,感觉很不错,蛮好用的。又能增加用户体验,测试了兼容性也很好,所以在这里分享下
首先,可以到官网上下载这款插件 htttp://www.jquery.com ,下载后有需要的话可以看下里面的demo
在项目中,只要在head中引用
前台页面,要加上4个隐藏域,分别记录剪切后的x,y坐标和长,宽。附上代码
![](gq_nav.jpg)
接着实例化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