一、效果預覽

效果圖

二塞耕、實現(xiàn)

1蚀腿、引入文件：jquery.js, cropper.min.css，ImgCropping.css扫外，cropper.min.js等莉钙，文件下載地址：http://www.jq22.com/jquery-info18167
2、裁剪圖片的彈框

  <div style="display: none" class="tailoring-container" id="tailoring-container">
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">

                    <div class="close-tailoring" onclick="closeTailor(this)">×</div>
                </div>

                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="tailoringImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>圖片預覽：</p>
                        <div class="square previewImg"></div>
                        <!--  <div class="circular previewImg"></div>-->
                    </div>
                </div>

                <div class="tailoring-content-three">
                    <button type="button" class="l-btn cropper-reset-btn">復位</button>
                    <button type="button" class="l-btn cropper-rotate-lef-btn">向右旋轉</button>
                     <button type="button" class="l-btn cropper-rotate-right-btn">向左旋轉</button>
                     <button type="button" class="l-btn cropper-big-btn">放大</button>
                     <button type="button" class="l-btn cropper-small-btn">縮小</button>

                    <button type="button" class="l-btn sureCut" id="sureCut" @@click="confirmCutImg">確定</button>
                </div>
            </div>
        </div>

    </template>

  </div> 

3筛谚、初始化

           // cropper圖片裁剪  
        $('#tailoringImg').cropper({  
           ...this.cutObj,  
            crop : function(e) {  
                // 輸出結果數(shù)據裁剪圖像磁玉。  
            }  
        });

4、選擇文件時調用以下代碼

         $(".tailoring-container").toggle();  
         var reader = new FileReader();  
        reader.onload = function(evt) {  
            var replaceSrc = evt.target.result;  
            // 更換cropper的圖片  
            $('#tailoringImg').cropper('replace', replaceSrc, false);// 默認false驾讲，適應高度蚊伞，不失真  
              flag = true
        }  
        reader.readAsDataURL(file);

5、點擊彈框的確定按鈕 調用以下代碼

   if ($("#tailoringImg").attr("src") == null) {  
                    return false;  
                } else {  
                    var cas = $('#tailoringImg').cropper('getCroppedCanvas');// 獲取被裁剪后的canvas  
                    var base64 = cas.toDataURL('image/jpeg'); // 轉換為base64  
                   
                   //這里去做上傳操作  
                  //uploadfile(base64)
                    closeTailor();// 關閉裁剪框  
              } 

6吮铭、其他功能函數(shù) 放大时迫、縮小、旋轉谓晌、復位等

 // 向左旋轉  
    $(".cropper-rotate-lef-btn").on("click", function() {  
        $('#tailoringImg').cropper("rotate", 45);  
    });  
    //向右旋轉  
    $(".cropper-rotate-right-btn").on("click", function() {  
        $('#tailoringImg').cropper("rotate", -45);  
    }); 
    
    //放大
   $(".cropper-big-btn").on("click", function() {  
        $('#tailoringImg').cropper('zoom', 0.1);  
    });
    //縮小
   $(".cropper-small-btn").on("click", function() {  
        $('#tailoringImg').cropper('zoom', -0.1);  
    });
    
    // 復位  
    $(".cropper-reset-btn").on("click", function() {  
        $('#tailoringImg').cropper("reset");  
    });  
      
      
  // 關閉裁剪框  
  function closeTailor() {  
    $(".tailoring-container").toggle();  
  }