JQuery Jcrop的一些使用方法

      最近网站需要一个修改头像的功能，在开发过程中看到了很多的网站目前都支持图片裁剪设定头像的功能，感觉很不错于是就开始在网上寻找相关的资料，总结了一下发现主流的分为两种一种是Flash，另一种是JQuery Jcrop，Flash的在网上四处搜寻了一下都没有发现一个真正可以使用的，又看到JCrop使用起来真的是相当的方便（我很懒的^_^），并且对各种浏览器的支持都非常不错。

      从Jcorp的官网http://deepliquid.com/content/Jcrop.html下载最新版本，我用的是0.98。

      将下载的压缩包解压后可以看到三个文件夹及一个index.html文件，/ css下放置的是Jcorp的样式文件，/demo下放置的是几个简单的例子（index.html中引用的链接就是放置在这个文件夹下），/js下放置的是Jcorp中最重要的脚本文件（在页面中使用的时候最好使用JCorp自带的JQuery脚本文件）。

      在页面中导入JQuery.js及JQuery.Jcrop.js。

 

      基本用法我就不细说了，DEMO中的例子都很简单，在这里主要说一下调用方式。

 

      Jcorp的调用主要分为两种方式

 

      1、jQuery('#cropbox').Jcrop({
                  onChange: showCoords,
                  onSelect: showCoords
           });

 

      2、var api = $.Jcrop('#cropbox',{
                  onChange: showPreview,
                  onSelect: showPreview,
                  aspectRatio: 1
           });

      这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp，变更图片的属性后再次为图片附加Jcorp。

 

评论

1 楼 estn_h 2012-07-24  

呵呵 不知道能否详细点呢！谢谢  才接触到jcrop！