<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://cdn.bootcss.com/croppie/2.6.2/croppie.js"></script>  
<link rel="Stylesheet" href="https://cdn.bootcss.com/croppie/2.6.2/croppie.css" />  
<style>  
  button,  

上传

  <div class="pop\_main">  
    <div class="pop\_con">  
      <div> <button class="pop\_close">x</button> </div>  
      <div class="crop">  
        <div id="upload-demo"></div>  
        <button class="upload-result">裁剪</button>  
      </div>

    </div>  
  <div class="pop\_mask"></div>  
  </div>

  <div id="result"></div>  
 </div>  
 <script>  
   $(function(){  

var $uploadCrop;

function readFile(input) {
if (input.files && input.files[0]) {
console.log("file----",input.files[0])
var reader = new FileReader();

reader.onload = function (e) {  
 $uploadCrop.croppie('bind', {  
  url: e.target.result  
 });  
} 

reader.readAsDataURL(input.files\[0\]);  

}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}

$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});

$('#upload').on('change', function () {
$(".pop_main").show();
$(".pop_con").css({'top':0,'opacity':0})
$(".pop_con").animate({'top':'50%','opacity':1})
readFile(this);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', 'canvas').then(function (resp) {
console.log("file---2",resp)
popupResult({
src: resp
});
});
});
$('.pop_close').on('click',function(ev){
$(".pop_main").hide()
var file = $("#upload")
file.after(file.clone().val(""));
file.remove();
})
function popupResult(result) {

var html;
if (result.html) {
html = result.html;
}
if (result.src) {
html = '';
}
$("#result").html(html);
}
});