图片上传和裁剪应用：Croppie

HTML

首先我们将相关js和css文件载入head中。

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

接下来我们在页面上放置一个图片上传按钮，我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后，在#upload-demo展示上传图片，以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。

<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>

CSS

使用以下CSS代码，我们很完美的将选择文件的控件转成按钮的样式，其实就是将type="file"透明度设成0，然后和button重叠。此外，我们先将图片裁剪区域.crop设置为不可见，等选择文件后再显示。

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}

jQuery

首先利用HTML5的FileReader API读取本地文件，然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport：可以设置所裁剪图片的宽度和高度，以及类型（圆形或方形）；选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom：是否支持鼠标滚轮缩放图像；showZoom：是否展示缩放条工具；update：回调函数。

$(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);   }  });

当点击“裁剪”按钮后，再次调用Croppie的result的方法，返回一张裁剪后的图片，并显示在#result中。

更多详情请关注Croppie项目官网： https://github.com/Foliotek/Croppie