집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 아바타 자르기 도구 jcrop 사용 예(데모 및 데모 소스 코드 다운로드 포함)_jquery

jQuery 아바타 자르기 도구 jcrop 사용 예(데모 및 데모 소스 코드 다운로드 포함)_jquery

WBOY원래의: 2016-05-16 15:18:471285검색

이 기사의 예에서는 jQuery 아바타 자르기 도구인 jcrop의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

가장 인기 있는 아바타 자르기 도구는 flash와 jquery입니다. 개인적으로는 jquery를 사용하는 것이 더 좋다고 생각합니다. 코드를 주의 깊게 공부하면 기본적으로 무슨 일이 일어나는지 이해할 수 있고, 원할 경우 변경하는 것이 더 쉽기 때문입니다.

예제가 있습니다. jcrop 예제 데모를 참조하세요. 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 업로드를 결합하면 아바타 업로드 및 가로채기 기능을 사용할 수 있어 매우 사용자 친화적입니다.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

jQuery 플러그인과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "일반적인 jQuery 플러그인 및 사용법 요약"

을 확인할 수 있습니다.

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：비동기 검증_javascript 기술을 구현하기 위한 기존 JavaScript 방법에 대한 자세한 설명다음 기사：비동기 검증_javascript 기술을 구현하기 위한 기존 JavaScript 방법에 대한 자세한 설명

jQuery 아바타 자르기 도구 jcrop 사용 예(데모 및 데모 소스 코드 다운로드 포함)_jquery

관련 기사