首页>>Jquery图片>>jQuery拖动剪裁图片作为头像特效(2021-10-08)

jQuery拖动剪裁图片作为头像特效

jQuery拖动剪裁图片作为头像特效
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.   <div class="imageBox">  
  3.     <div class="thumbBox"></div>  
  4.     <div class="spinner" style="display: none">Loading...</div>  
  5.   </div>  
  6.   <div class="action">   
  7.     <div class="new-contentarea tc">   
  8.         <a href="javascript:void(0)" class="upload-img">  
  9.             <label for="upload-file">上传图像</label>  
  10.       </a>  
  11.       <input type="file" class="" name="upload-file" id="upload-file" />  
  12.     </div>  
  13.     <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">  
  14.     <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >  
  15.     <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >  
  16.   </div>  
  17.   <div class="cropped"></div>  
  18. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(window).load(function() {  
  3.     var options =  
  4.     {  
  5.         thumbBox: '.thumbBox',  
  6.         spinner: '.spinner',  
  7.         imgSrc: 'img/avatar.jpg'  
  8.     }  
  9.     var cropper = $('.imageBox').cropbox(options);  
  10.     $('#upload-file').on('change', function(){  
  11.         var reader = new FileReader();  
  12.         reader.onload = function(e) {  
  13.             options.imgSrc = e.target.result;  
  14.             cropper = $('.imageBox').cropbox(options);  
  15.         }  
  16.         reader.readAsDataURL(this.files[0]);  
  17.         this.files = [];  
  18.     })  
  19.     $('#btnCrop').on('click', function(){  
  20.         var img = cropper.getDataURL();  
  21.         $('.cropped').html('');  
  22.         $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');  
  23.         $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');  
  24.         $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');  
  25.     })  
  26.     $('#btnZoomIn').on('click', function(){  
  27.         cropper.zoomIn();  
  28.     })  
  29.     $('#btnZoomOut').on('click', function(){  
  30.         cropper.zoomOut();  
  31.     })  
  32. });  
  33. </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_918.html