cropped仿新浪微博头像上传裁剪缩小放大预览

erdangjiade2

演示效果参考：http://www.erdangjiade.com/js/910.html

1. 上传图像，裁剪，放大，缩小等html代码<div class="imageBox">
   
2.     <div class="thumbBox"></div>
   
3.     <div class="spinner" style="display: none">Loading...</div>
   
4. </div>
   
5. <div class="action">  
   
6.     <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
   
7.             <label for="upload-file">上传图像</label>
   
8.         </a>
   
9.         <input type="file" name="upload-file" id="upload-file" />
   
10.     </div>
    
11.     <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切"/>
    
12.     <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"/>
    
13.     <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-"/>
    
14. </div>
    
15. <div class="cropped"></div><script type="text/javascript" src="js/cropbox.js"></script>var options =
    
16.         {
    
17.             thumbBox: '.thumbBox',
    
18.             spinner: '.spinner',
    
19.             imgSrc: 'images/avatar.png'
    
20.         }
    
21. var cropper = $('.imageBox').cropbox(options);
    
22. $('#upload-file').on('change', function() {
    
23.     var reader = new FileReader();
    
24.     reader.onload = function(e) {
    
25.         options.imgSrc = e.target.result;
    
26.         cropper = $('.imageBox').cropbox(options);
    
27.     }
    
28.     reader.readAsDataURL(this.files[0]);
    
29.     this.files = [];
    
30. })
    
31. $('#btnCrop').on('click', function() {
    
32.     var img = cropper.getDataURL();
    
33.     $('.cropped').html('');
    
34.     $('.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>');
    
35.     $('.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>');
    
36.     $('.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>');
    
37. })
    
38. $('#btnZoomIn').on('click', function() {
    
39.     cropper.zoomIn();
    
40. })
    
41. $('#btnZoomOut').on('click', function() {
    
42.     cropper.zoomOut();
    
43. })
    
44. 
    

复制代码

演示效果参考：http://www.erdangjiade.com/js/910.html