jQuery实现图片上传和裁剪插件Croppie

<script src="jquery.min.js"></script> <script src="croppie.min.js"></script> <link rel="stylesheet" href="croppie.css"> 

<div class="actions">  <button class="file-btn">   <span>上传</span>   <input type="file" id="upload" value="选择图片文件" />  </button>  <div class="crop">   <div id="upload-demo"></div>   <button class="upload-result">裁剪</button>  </div>  <div id="result"></div> </div> 

button, a.btn {  background-color: #189094;  color: white;  padding: 10px 15px;  border-radius: 3px;  border: 1px solid rgba(255, 255, 255, 0.5);  font-size: 16px;  cursor: pointer;  text-decoration: none;  text-shadow: none; } button:focus {  outline: 0; }  .file-btn {  position: relative; } .file-btn input[type="file"] {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  opacity: 0; }  .actions {  padding: 5px 0; } .actions button {  margin-right: 5px; } .crop{display:none} 

$(function(){  var $uploadCrop;    function readFile(input) {     if (input.files && 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 () {    $(".crop").show();    readFile(this);   });   $('.upload-result').on('click', function (ev) {    $uploadCrop.croppie('result', 'canvas').then(function (resp) {     popupResult({      src: resp     });    });   });     function popupResult(result) {   var html;   if (result.html) {    html = result.html;   }   if (result.src) {    html = '<img src="' + result.src + '" />';   }   $("#result").html(html);  } });