jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery头像裁剪工具jcrop用法。分享给大家供大家参考，具体如下：

头像裁剪工具目前比较流行的是flash和jquery的。个人觉得用jquery的比较好，因为代码仔细研究一下，基本上能明白怎么回事，想改的话也比较容易。

有一个例子，请参考：jcrop例子demo ，是根jcrop的例子改的，添加以下二个特点：

1，居中显示，并且可拖拉，改变截取的大小
2，预览的图片，根拖拉的大小成比例。

以下是js代码，作了简单的封装

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
 <head>
  <meta http-equiv=\"Content-type\" content=\"text/html;charset=UTF-8\" /> 
  <title>jcrop 图片拖动</title>
  <script src=\"jquery.min.js\" type=\"text/javascript\"></script>
  <script src=\"jquery.Jcrop.min.js\" type=\"text/javascript\"></script>
  <link rel=\"stylesheet\" href=\"jquery.Jcrop.css\" type=\"text/css\" />
  <link rel=\"stylesheet\" href=\"demos.css\" type=\"text/css\" />
 </head>
 <body>
 <div id=\"outer\">
 <div class=\"jcExample\">
 <div class=\"article\">
  <h1>上传头像拖动例子</h1>
  <table>
   <tr>
    <td>
     <img src=\"sago.jpg\" id=\"target\" alt=\"Flowers\" />
    </td>
    <td>
     <div style=\"width:100px;height:100px;overflow:hidden;\" id=\"aa\">
      <img src=\"sago.jpg\" id=\"preview\" alt=\"Preview\" class=\"jcrop-preview\" />
     </div>
    </td>
   </tr>
  </table>
 </div>
 </div>
 </div>
 </body>
<script type=\"text/javascript\">
new cutImage().init();
function cutImage(){
  var oop = this;
  this.option = {
    x:170,
    y:110,
    w:350,
    h:200,
    t:\'target\',
    p:\'preview\',
    o:\'aa\'
  }
  this.init = function(){
    oop.target();
  }
  this.target = function(){
   $(\'#\'+oop.option[\'t\']).Jcrop({
     onChange: oop.updatePreview,
     onSelect: oop.updatePreview,
     aspectRatio: 1,
     setSelect: [ oop.option[\'x\'], oop.option[\'y\'], oop.option[\'w\'],oop.option[\'h\'] ],
     bgFade:   true,
     bgOpacity: .5
    });
  }
  this.updatePreview = function(obj){
    if (parseInt(obj.w) > 0)
    {
     var rx = $(\'#\'+oop.option[\'o\']).width()/ obj.w;
     var ry = $(\'#\'+oop.option[\'o\']).height()/ obj.h;
     $(\'#\'+oop.option[\'p\']).css({
      width: Math.round(rx*$(\'#\'+oop.option[\'t\']).width()) + \'px\',
      height: Math.round(ry*$(\'#\'+oop.option[\'t\']).height()) + \'px\',
      marginLeft: \'-\' + Math.round(rx * obj.x) + \'px\',
      marginTop: \'-\' + Math.round(ry * obj.y) + \'px\'
     });
    }
  }
}
</script>
</html>

jquery jcrop结合jquery ajax upload的话，可以使头像上传截取功能，很人性化。

完整实例代码点击此处本站下载。

更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24582

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案