您的位置:晶晶的博客>前端>Jquery辅助图片裁剪插件jcrop简介,一款web图片裁剪插件

Jquery辅助图片裁剪插件jcrop简介,一款web图片裁剪插件

    Jcrop是一款jquery图片裁剪插件,可以实现图片在线裁剪,达到和图像软件处理的效果,界面和操作也相当的人性化,只需要拖曳鼠标即可完成图片的裁剪大小设置,然后配合服务器后端程序进行ajax提交坐标数据进行裁剪,jcrop部署到服务器也非常简单,在网站建设过程中可以很轻易的美化表单,并且改善用户体验;这个项目的地址:http://deepliquid.com/content/Jcrop.html

    Jcrop最新版本为V0.9.10,当然它因为是jquery的一个插件,对浏览器的支持也是相当给力的,IE6.0都还支持。Jcrop默认加载的是jquery1.7.2,当然经过测试,最新版的jquery1.8.3也是可以用的。Jcrop本身是不能裁剪图片的,它只是一个js库,通过它可以友好的确定出图片的坐标信息,然后传递给服务器,通过服务器脚本进行图片裁剪,从而完成图片的裁剪,而整个过程在用户看来似乎只是浏览器一瞬间完成的裁剪,所以使用Jcrop还得配合服务器端程序进行代码编写,同时还需要配合Ajax技术后端提交相应与用户无关的数据。

    以下介绍一些Jcrop的js事件函数,这个是关系到裁剪使用的

    onSelect 

    这个事件是在用户已经选定成功后触发,这个时候可以在这个时间触发是写上一些ajax请求,请求服务器端脚本进行图片裁剪,然后返回裁剪后的图片url并显示,就完成了图片裁剪的过程,而在用户看来似乎就是在浏览器上进行的裁剪。

    onChange 

    这个事件是指用户选定图片后在移动图片上的选定框时触发,可以随时获取用户选定的坐标数据,也可以通过检测与用户进行友好交互。

    onRelease

    这个事件是指用户选定图片行为已经释放或者说图片选定框已经消失后的事件。

    更多的使用方法与初始化参数请参考:http://deepliquid.com/content/Jcrop_Manual.html 其实这里面的一些英文都是非常初级的,很好看的。

    当然,如果涉及到图片处理,肯定也会涉及到图片上传的问题,这里在附带推荐一款上传工具---swfupload 

    下载地址:http://code.google.com/p/swfupload/downloads/detail?name=swfupload.swf.v2.5.0.beta3.2.zip&can=2&q=

    更多关于swfupload的介绍就不在此处进行了,Jcroppe配合swfupload这是一绝~~~

转载请注明本文标题和链接:《Jquery辅助图片裁剪插件jcrop简介,一款web图片裁剪插件

相关推荐

网友评论4

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    777777777777777777777777777777哈哈

    777哈 3年前 (2014-06-22) 回复
  2. #2

    谢谢分享

    payoneer万事达卡 3年前 (2014-04-29) 回复
  3. #3

    文章写的不错,赞一个,欢迎回访~

    帮宝适纸尿裤 4年前 (2013-04-16) 回复
  4. #4

    阿卡家到此围观,您的文章写的真是惊为天人,泣鬼神了,佩服万分,发此评论以感涕零,再摆!!

    阿卡家 4年前 (2013-04-15) 回复