caojunfei
/
stest


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple jQuery image cropping plugin.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Cropper</title>
  <link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
  <link href="favicon.ico" rel="shortcut icon">
  <link href="favicon.ico" rel="icon">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" rel="stylesheet">
  <link href="css/cropper.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header class="navbar navbar-inverse navbar-static-top docs-header" id="top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse" type="button">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="javascript:void(0);">Cropper</a>
      </div>
      <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
        <p class="navbar-text">A simple jQuery image cropping plugin.</p>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#examples">Examples</a></li>
          <li><a href="//github.com/fengyuanchen/cropper/blob/master/README.md">Docs</a></li>
          <li><a href="//github.com/fengyuanchen/cropper">Github</a></li>
          <li><a href="//chenfengyuan.com">About</a></li>
          <li><a href="//fengyuanchen.github.io/">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Content -->
  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <!-- <h3 class="page-header">Demo:</h3> -->
        <div class="img-container">
          <img src="img/picture.jpg" alt="Picture">
        </div>
      </div>
      <div class="col-md-3">
        <!-- <h3 class="page-header">Preview:</h3> -->
        <div class="docs-preview clearfix">
          <div class="img-preview preview-lg"></div>
          <div class="img-preview preview-md"></div>
          <div class="img-preview preview-sm"></div>
          <div class="img-preview preview-xs"></div>
        </div>

        <!-- <h3 class="page-header">Data:</h3> -->
        <div class="docs-data">
          <div class="input-group">
            <label class="input-group-addon" for="dataX">X</label>
            <input class="form-control" id="dataX" type="text" placeholder="x">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataY">Y</label>
            <input class="form-control" id="dataY" type="text" placeholder="y">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataWidth">Width</label>
            <input class="form-control" id="dataWidth" type="text" placeholder="width">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataHeight">Height</label>
            <input class="form-control" id="dataHeight" type="text" placeholder="height">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataRotate">Rotate</label>
            <input class="form-control" id="dataRotate" type="text" placeholder="rotate">
            <span class="input-group-addon">deg</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 docs-buttons">
        <!-- <h3 class="page-header">Toolbar:</h3> -->
        <div class="btn-group">
          <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
              <span class="icon icon-move"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
              <span class="icon icon-crop"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
              <span class="icon icon-zoom-in"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
              <span class="icon icon-zoom-out"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
              <span class="icon icon-rotate-left"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
              <span class="icon icon-rotate-right"></span>
            </span>
          </button>
        </div>

        <div class="btn-group">
          <button class="btn btn-primary" data-method="disable" type="button" title="Disable">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;disable&quot;)">
              <span class="icon icon-lock"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="enable" type="button" title="Enable">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;enable&quot;)">
              <span class="icon icon-unlock"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="clear" type="button" title="Clear">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
              <span class="icon icon-remove"></span>
            </span>
          </button>
          <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
              <span class="icon icon-refresh"></span>
            </span>
          </button>
          <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
            <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
            <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
              <span class="icon icon-upload"></span>
            </span>
          </label>
          <button class="btn btn-primary" data-method="destroy" type="button" title="Destroy">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
              <span class="icon icon-off"></span>
            </span>
          </button>
        </div>

        <div class="btn-group btn-group-crop">
          <button class="btn btn-primary" data-method="getCroppedCanvas" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
              Get Cropped Canvas
            </span>
          </button>
          <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 160, &quot;height&quot;: 90 })">
              160 &times; 90
            </span>
          </button>
          <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 320, &quot;height&quot;: 180 })">
              320 &times; 180
            </span>
          </button>
        </div>

        <!-- Show the cropped image in modal -->
        <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
              </div>
              <div class="modal-body"></div>
              <!-- <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
              </div> -->
            </div>
          </div>
        </div><!-- /.modal -->

        <div class="btn-group">
          <button class="btn btn-primary" data-method="getData" data-option="" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
              Get Data
            </span>
          </button>
          <button class="btn btn-primary btn-toggle" data-toggle="modal" data-target="#diagram" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="View diagram of data properties">
              <span class="icon icon-info"></span>
            </span>
          </button>
        </div>
        <button class="btn btn-primary" data-method="getImageData" data-option="" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getImageData&quot;)">
            Get Image Data
          </span>
        </button>
        <button class="btn btn-primary" data-method="getCanvasData" data-option="" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCanvasData&quot;)">
            Get Canvas Data
          </span>
        </button>
        <button class="btn btn-primary" data-method="setCanvasData" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCanvasData&quot;, data)">
            Set Canvas Data
          </span>
        </button>
        <button class="btn btn-primary" data-method="getCropBoxData" data-option="" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCropBoxData&quot;)">
            Get Crop Box Data
          </span>
        </button>
        <button class="btn btn-primary" data-method="setCropBoxData" data-target="#putData" type="button">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCropBoxData&quot;, data)">
            Set Crop Box Data
          </span>
        </button>
        <input class="form-control" id="putData" type="text" placeholder="Get data to here or set data with this value">

        <!-- Show the diagram in modal -->
        <div class="modal fade docs-diagram" id="diagram" aria-hidden="true" aria-labelledby="diagramTitle" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="diagramTitle">Diagram of data's properties</h4>
              </div>
              <div class="modal-body">
                <img class="img-responsive" src="img/data.png" alt="a schematic diagram of data's properties">
              </div>
              <!-- <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
              </div> -->
            </div>
          </div>
        </div><!-- /.modal -->

      </div><!-- /.docs-buttons -->

      <div class="col-md-3 docs-toggles">
        <!-- <h3 class="page-header">Toggles:</h3> -->
        <div class="btn-group btn-group-justified" data-toggle="buttons">
          <label class="btn btn-primary active" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
            <input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 16 / 9)">
              16:9
            </span>
          </label>
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
            <input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 4 / 3)">
              4:3
            </span>
          </label>
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
            <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 1 / 1)">
              1:1
            </span>
          </label>
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
            <input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 2 / 3)">
              2:3
            </span>
          </label>
          <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
            <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, NaN)">
              Free
            </span>
          </label>
        </div>

        <div class="dropdown dropup docs-options">
          <button class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" type="button" data-toggle="dropdown" aria-expanded="true">
            Toggle Options
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="toggleOptions">
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="strict" checked>
                strict
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="responsive" checked>
                responsive
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="checkImageOrigin" checked>
                checkImageOrigin
              </label>
            </li>

            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="modal" checked>
                modal
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="guides" checked>
                guides
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="highlight" checked>
                highlight
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="background" checked>
                background
              </label>
            </li>

            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="autoCrop" checked>
                autoCrop
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="dragCrop" checked>
                dragCrop
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="movable" checked>
                movable
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="resizable" checked>
                resizable
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="rotatable" checked>
                rotatable
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="zoomable" checked>
                zoomable
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="touchDragZoom" checked>
                touchDragZoom
              </label>
            </li>
            <li role="presentation">
              <label class="checkbox-inline">
                <input type="checkbox" name="option" value="mouseWheelZoom" checked>
                mouseWheelZoom
              </label>
            </li>
          </ul>
        </div><!-- /.dropdown -->

        <button class="btn btn-primary btn-block" id="toggle-sources" data-toggle="collapse" data-target="#sources" type="button" aria-expanded="true">Toggle Sources</button>

      </div><!-- /.docs-toggles -->

    </div>
    <div class="collapse" id="sources" aria-labelledby="toggle-sources">
      <!-- <h4 class="page-header">Sources:</h4> -->
      <div class="row">
        <div class="col-sm-6">
          <h5>HTML:</h5>
          <pre class="prettyprint">...
&lt;div class=&quot;img-container&quot;&gt;
  &lt;img src=&quot;img/picture.jpg&quot;&gt;
&lt;/div&gt;
...
...
&lt;div class=&quot;img-preview preview-lg&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;img-preview preview-md&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;img-preview preview-sm&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;img-preview preview-xs&quot;&gt;&lt;/div&gt;
...</pre>
        </div>

        <div class="col-sm-6">
          <h5>Javascript:</h5>
          <pre class="prettyprint">$(&quot;.img-container > img&quot;).cropper({
  aspectRatio: 16 / 9,
  preview: &quot;.img-preview&quot;,
  crop: function(data) {
    $(&quot;#dataX&quot;).val(Math.round(data.x));
    $(&quot;#dataY&quot;).val(Math.round(data.y));
    $(&quot;#dataHeight&quot;).val(Math.round(data.height));
    $(&quot;#dataWidth&quot;).val(Math.round(data.width));
    $(&quot;#dataRotate&quot;).val(Math.round(data.rotate));
  }
});</pre>
        </div>

      </div>
    </div>
  </div>

  <!-- Examples -->
  <div class="container">
    <h2 class="page-header" id="examples">Examples</h2>

    <!-- Example 1 -->
    <h3 class="page-header">Cropper with fixed crop box.</h3>
    <div class="row">
      <div class="col-sm-6">
        <h5>Demo:</h5>
        <div class="cropper-example-1">
          <img class="img-responsive" src="img/picture.jpg" alt="Picture">
        </div>
      </div>
      <div class="col-sm-6">
        <h5>HTML:</h5>
        <pre class="prettyprint">&lt;div class=&quot;cropper-example-1&quot;&gt;
  &lt;img src=&quot;img/picture.jpg&quot; alt=&quot;Picture&quot;&gt;
&lt;/div&gt;</pre>
        <h5>JavaScript:</h5>
        <pre class="prettyprint">$('.cropper-example-1 &gt; img').cropper({
  aspectRatio: 16 / 9,
  autoCropArea: 0.65,
  strict: false,
  guides: false,
  highlight: false,
  dragCrop: false,
  movable: false,
  resizable: false
});</pre>
      </div>
    </div>

    <!-- Example 2 -->
    <h3 class="page-header">Cropper in a Bootstrap modal</h3>
    <div class="row">
      <div class="col-sm-6">
        <p>Demo:</p>
        <p><button class="btn btn-primary" data-toggle="modal" data-target="#cropper-example-2-modal" type="button">Launch the demo</button></p>
        <p>HTML:</p>
        <pre class="prettyprint">&lt;div class=&quot;modal fade&quot; id=&quot;cropper-example-2-modal&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      ...
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;div id=&quot;cropper-example-2&quot;&gt;
          &lt;img src=&quot;img/picture.jpg&quot; alt=&quot;Picture&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

        <!-- Modal -->
        <div class="modal fade" id="cropper-example-2-modal" aria-hidden="true" aria-labelledby="bootstrap-modal-label" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="bootstrap-modal-label">Cropper</h4>
              </div>
              <div class="modal-body">
                <div id="cropper-example-2">
                  <img class="img-responsive" src="img/picture.jpg" alt="Picture">
                </div>
              </div>
              <!-- <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
              </div> -->
            </div>
          </div>
        </div><!-- /.modal -->

      </div>
      <div class="col-sm-6">
        <p>JavaScript:</p>
        <pre class="prettyprint">var $image = $('#cropper-example-2 &gt; img'),
    canvasData,
    cropBoxData;

$('#cropper-example-2-modal').on('shown.bs.modal', function () {
  $image.cropper({
    autoCropArea: 0.5,
    built: function () {
      $image.cropper('setCanvasData', canvasData);
      $image.cropper('setCropBoxData', cropBoxData);
    }
  });
}).on('hidden.bs.modal', function () {
  canvasData = $image.cropper('getCanvasData');
  cropBoxData = $image.cropper('getCropBoxData');
  $image.cropper('destroy');
});</pre>
      </div>
    </div>

    <!-- Example 3 -->
    <h3 class="page-header">Crop avatar <small>A complete example</small></h3>
    <p>This example requires a <strong>PHP</strong> server to upload and crop image. Please download and test it.</p>
    <div class="docs-buttons">
      <a class="btn btn-primary" href="//github.com/fengyuanchen/cropper/archive/master.zip">Download</a>
      <a class="btn btn-primary" href="//github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar">View the sources</a>
    </div>

  </div>

  <!-- footer -->
  <footer class="docs-footer">
    <div class="container">
      <a href="//github.com/fengyuanchen/cropper/">Github</a>
      <a href="//github.com/fengyuanchen/cropper/issues">Issues</a>
      <a href="//github.com/fengyuanchen/cropper/releases">Releases</a>
      <a href="//github.com/fengyuanchen/cropper/blob/master/LICENSE.md">License</a>
      <a href="//github.com/fengyuanchen/cropper/tree/v0.8.0">v0.8.0 docs</a>
      <a href="//fengyuanchen.github.io/cropper/0.7.9">v0.7.9 docs</a>
      <a class="back-to-top" href="#top" title="Back to top">Back to top</a>
    </div>
  </footer>

  <!-- Alert -->
  <div class="docs-alert"><span class="warning message"></span></div>

  <!-- Scripts -->
  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
  <script src="//fengyuanchen.github.io/assets/js/main.js"></script>
  <script src="js/cropper.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>