Jcrop-jquery图片裁剪插件

发布于,归属于jquery插件2个座位已被强势霸占! 共有665人围观    

jcrop

点此下载
如果有用过www.gravatar.com的头像的话就知道,该网站带有一个强大的图片裁剪功能,而这个功能就是使用Jcrop实现的。这是一个值得使用的插件,带有完备的API,你可以非常自由的使用其中的功能。压缩包带有5个demo,其中第五个demo要多把玩下。

来看下其使用方法:

关键的图片的html代码是免不了

  1. <img src="demo_files/sago.jpg" id="cropbox" />

值得一提的是,插件运行后,会将此图片隐藏,复制出2个图片,一张作为背景,而另外一张放在裁剪层。而背景层图片是可以指定的,并非一定要同一张图片,具体参见第5个demo。

来看其javascript代码

  1. jQuery(function(){
  2.             var jcrop_api = jQuery('#cropbox').Jcrop();
  3.         });

这是最为简单的形式,可满足基础需求,当然Jcrop还有很多参数和函数供灵活使用。
我引用demo5,来简单说明下。

  1. setSelect():显示并设置特定尺寸的裁剪层
  2. animateTo():以动画的形式将裁剪层移动到某坐标,同时也可改变裁剪层大小
  3. release():隐藏裁剪层
  4. setOptions():是配置Jcrop属性,接受的是对象字面量参数,包含是否允许拖动、缩放、重绘等,详见demo5,值得一提的是,如果重新设置了其选项,后面务必调用focus()方法。
(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占!

  1. hiro

    你的链接已经添加,多多交流!

  2. sinsky

    看帖 回帖是一种美德 谢谢分享