> 웹 프론트엔드 > JS 튜토리얼 > jQuery 사용자 아바타 자르기 플러그인 Cropbox.js 예제 공유

jQuery 사용자 아바타 자르기 플러그인 Cropbox.js 예제 공유

小云云
풀어 주다: 2018-01-10 10:28:48
원래의
2099명이 탐색했습니다.

이 글은 주로 jQuery 사용자 아바타 자르기 플러그인인cropbox.js의 사용법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

거의 모든 웹페이지에는 필수 이미지 업로드 및 이미지 자르기 기능이 있습니다. 이 기능은 여기서는cropbox.js 플러그인을 통해 구현됩니다.


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropbox.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: &#39;.thumbBox&#39;,
      spinner: &#39;.spinner&#39;,
      imgSrc: &#39;images/avatar.png&#39;
    }
    var cropper = $(&#39;.imageBox&#39;).cropbox(options);
    $(&#39;#file&#39;).on(&#39;change&#39;, function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $(&#39;.imageBox&#39;).cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $(&#39;#btnCrop&#39;).on(&#39;click&#39;, function(){
      var img = cropper.getDataURL();
      $(&#39;.cropped&#39;).append(&#39;<img src="&#39;+img+&#39;">&#39;);
    })
    $(&#39;#btnZoomIn&#39;).on(&#39;click&#39;, function(){
      cropper.zoomIn();
    })
    $(&#39;#btnZoomOut&#39;).on(&#39;click&#39;, function(){
      cropper.zoomOut();
    })
  });
</script>
로그인 후 복사

관련 권장 사항:

Jquery 이미지 자르기 플러그인

5개의 최신 jQuery 이미지 자르기 플러그인

jQuery 이미지 업로드 및 자르기 플러그인 Croppie_jquery

위 내용은 jQuery 사용자 아바타 자르기 플러그인 Cropbox.js 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿