基于jQuery头像裁剪插件cropbox

今天给大家分享一款基于jQuery头像裁剪插件cropbox，这是一款简单实用的jQuery头像在线裁剪插件。该插件适用于适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <div class="container">    <div class="imageBox">      <div class="thumbBox">      </div>      <div class="spinner" style="display: none">        Loading...</div>    </div>    <div class="action">      <input type="file" id="file" style="float: left; width: 250px">      <input type="button" id="btnCrop" value="Crop" style="float: right">      <input type="button" id="btnZoomIn" value="+" style="float: right">      <input type="button" id="btnZoomOut" value="-" style="float: right">    </div>    <div class="cropped">    </div>  </div>

css代码：

  .container    {      position: absolute;      top: 5%;      left: 36%;      right: 0;      bottom: 0;    }    .action    {      width: 400px;      height: 30px;      margin: 10px 0;    }    .cropped > img    {      margin-right: 10px;    }

javascript代码：

$(window).load(function () {      var options =    {      thumbBox: '.thumbBox',      spinner: '.spinner',      imgSrc: 'images/avatar.png'    }      var cropper = $('.imageBox').cropbox(options);      $('#file').on('change', function () {        var reader = new FileReader();        reader.onload = function (e) {          options.imgSrc = e.target.result;          cropper = $('.imageBox').cropbox(options);        }        reader.readAsDataURL(this.files[0]);        this.files = [];      })      $('#btnCrop').on('click', function () {        var img = cropper.getDataURL();        $('.cropped').append('<img src='/images/loading.gif' data-original="' + img + '">');      })      $('#btnZoomIn').on('click', function () {        cropper.zoomIn();      })      $('#btnZoomOut').on('click', function () {        cropper.zoomOut();      })    });

via：http://www.w2bc.com/Article/26838

原标题：基于jQuery头像裁剪插件cropbox

关键词：jquery