/home/mip/public_html/template/AdminLTE/plugins/cropper-master/docs/v1.0.0/index.html
<!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, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development">
<meta name="author" content="Fengyuan Chen">
<title>Cropper</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/fengyuanchen/tooltip/v0.0.2/dist/tooltip.min.css">
<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- 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 type="button" class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse">
<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="./">Cropper</a>
</div>
<nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#examples">Examples</a></li>
<li><a href="https://github.com/fengyuanchen/cropper/tree/v1.0.0/README.md">Docs</a></li>
<li><a href="https://github.com/fengyuanchen/cropper">GitHub</a></li>
<li><a href="https://fengyuanchen.github.io/">More</a></li>
<li><a href="http://chenfengyuan.com">About</a></li>
</ul>
</nav>
</div>
</header>
<!-- Jumbotron -->
<div class="jumbotron docs-jumbotron">
<div class="container">
<h1>Cropper <small class="version">v1.0.0</small></h1>
<p class="lead">A simple jQuery image cropping plugin.</p>
</div>
</div>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3>Demo:</h3> -->
<div class="img-container">
<img src="img/picture.jpg" alt="Picture">
</div>
</div>
<div class="col-md-3">
<!-- <h3>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>Data:</h3> -->
<div class="docs-data">
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataX">X</label>
<input type="text" class="form-control" id="dataX" placeholder="x">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataY">Y</label>
<input type="text" class="form-control" id="dataY" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataWidth">Width</label>
<input type="text" class="form-control" id="dataWidth" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataHeight">Height</label>
<input type="text" class="form-control" id="dataHeight" placeholder="height">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataRotate">Rotate</label>
<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
<span class="input-group-addon">deg</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleX">ScaleX</label>
<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleY">ScaleY</label>
<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
</div>
</div>
</div>
</div>
<div class="row docs-actions">
<div class="col-md-9 docs-buttons">
<!-- <h3>Toolbar:</h3> -->
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "move")">
<span class="fa fa-arrows"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "crop")">
<span class="fa fa-crop"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", 0.1)">
<span class="fa fa-search-plus"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", -0.1)">
<span class="fa fa-search-minus"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", -10, 0)">
<span class="fa fa-arrow-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 10, 0)">
<span class="fa fa-arrow-right"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, -10)">
<span class="fa fa-arrow-up"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, 10)">
<span class="fa fa-arrow-down"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", -45)">
<span class="fa fa-rotate-left"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", 45)">
<span class="fa fa-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-flip="horizontal" data-method="scale" data-option="-1" data-second-option="1" title="Flip Horizontal">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scale", -1, 1)">
<span class="fa fa-arrows-h"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-flip="vertical" data-method="scale" data-option="1" data-second-option="-1" title="Flip Vertical">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scale", 1, -1)">
<span class="fa fa-arrows-v"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("crop")">
<span class="fa fa-check"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="clear" title="Clear">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("clear")">
<span class="fa fa-remove"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="disable" title="Disable">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("disable")">
<span class="fa fa-lock"></span>
</span>
</button>
<button type="button" class="btn btn-primary" data-method="enable" title="Enable">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("enable")">
<span class="fa fa-unlock"></span>
</span>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" data-method="reset" title="Reset">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("reset")">
<span class="fa fa-refresh"></span>
</span>
</button>
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
<span class="fa fa-upload"></span>
</span>
</label>
<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("destroy")">
<span class="fa fa-power-off"></span>
</span>
</button>
</div>
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })">
320×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 type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a class="btn btn-primary" id="download" download="cropped.png" href="javascript:void(0);">Download</a>
</div>
</div>
</div>
</div><!-- /.modal -->
<button type="button" class="btn btn-primary" data-method="getData" data-option data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getData")">
Get Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setData" data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setData", data)">
Set Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getContainerData" data-option data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getContainerData")">
Get Container Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getImageData" data-option data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getImageData")">
Get Image Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCanvasData" data-option data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCanvasData")">
Get Canvas Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setCanvasData" data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setCanvasData", data)">
Set Canvas Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCropBoxData" data-option data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCropBoxData")">
Get Crop Box Data
</span>
</button>
<button type="button" class="btn btn-primary" data-method="setCropBoxData" data-target="#putData">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setCropBoxData", data)">
Set Crop Box Data
</span>
</button>
<input type="text" class="form-control" id="putData" placeholder="Get data to here or set data with this value">
</div><!-- /.docs-buttons -->
<div class="col-md-3 docs-toggles">
<!-- <h3>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 type="radio" class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 16 / 9)">
16:9
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
<input type="radio" class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 4 / 3)">
4:3
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
<input type="radio" class="sr-only" id="aspestRatio3" name="aspestRatio" value="1">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 1 / 1)">
1:1
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
<input type="radio" class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 2 / 3)">
2:3
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
<input type="radio" class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", NaN)">
Free
</span>
</label>
</div>
<div class="dropdown dropup docs-options">
<button type="button" class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" data-toggle="dropdown" aria-expanded="true">
Toggle Options
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="toggleOptions" role="menu">
<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="center" checked>
center
</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="rotatable" checked>
rotatable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="scalable" checked>
scalable
</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="mouseWheelZoom" checked>
mouseWheelZoom
</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="cropBoxMovable" checked>
cropBoxMovable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="cropBoxResizable" checked>
cropBoxResizable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="doubleClickToggle" checked>
doubleClickToggle
</label>
</li>
</ul>
</div><!-- /.dropdown -->
<button type="button" class="btn btn-primary btn-block" id="toggle-sources" data-target="#sources" data-toggle="collapse" aria-expanded="true">Toggle Sources</button>
<a class="btn btn-default btn-block" href="http://fengyuanchen.github.io/cropperjs/" data-toggle="tooltip" target="_blank" title="Cropper without jQuery">Go to CropperJS</a>
</div><!-- /.docs-toggles -->
</div>
<div class="collapse" id="sources" aria-labelledby="toggle-sources">
<!-- <h4>Sources:</h4> -->
<div class="row">
<div class="col-sm-6">
<h5>HTML:</h5>
<pre class="prettyprint">...
<div class="img-container">
<img src="img/picture.jpg">
</div>
...
...
<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>
...</pre>
</div>
<div class="col-sm-6">
<h5>Javascript:</h5>
<pre class="prettyprint">$(".img-container > img").cropper({
aspectRatio: 16 / 9,
preview: ".img-preview",
crop: function(e) {
$("#dataX").val(Math.round(e.x));
$("#dataY").val(Math.round(e.y));
$("#dataHeight").val(Math.round(e.height));
$("#dataWidth").val(Math.round(e.width));
$("#dataRotate").val(e.rotate);
$("#dataScaleX").val(e.scaleX);
$("#dataScaleY").val(e.scaleY);
}
});</pre>
</div>
</div>
</div>
</div>
<!-- Examples -->
<div class="container">
<h2 id="examples">Examples</h2>
<!-- Example 1 -->
<h3>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"><div class="cropper-example-1">
<img src="img/picture.jpg" alt="Picture">
</div></pre>
<h5>JavaScript:</h5>
<pre class="prettyprint">$('.cropper-example-1 > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});</pre>
</div>
</div>
<!-- Example 2 -->
<h3>Cropper in a Bootstrap modal</h3>
<div class="row">
<div class="col-sm-6">
<p>Demo:</p>
<p><button type="button" class="btn btn-primary" data-target="#cropper-example-2-modal" data-toggle="modal">Launch the demo</button></p>
<p>HTML:</p>
<pre class="prettyprint"><div class="modal fade" id="cropper-example-2-modal">
<div class="modal-dialog">
<div class="modal-content">
...
<div class="modal-body">
<div id="cropper-example-2">
<img src="img/picture.jpg" alt="Picture">
</div>
</div>
...
</div>
</div>
</div></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 type="button" class="close" data-dismiss="modal" aria-hidden="true">×</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 type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div><!-- /.modal -->
</div>
<div class="col-sm-6">
<p>JavaScript:</p>
<pre class="prettyprint">var $image = $('#cropper-example-2 > img'),
cropBoxData,
canvasData;
$('#cropper-example-2-modal').on('shown.bs.modal', function () {
$image.cropper({
autoCropArea: 0.5,
built: function () {
// Strict mode: set crop box data first
$image.cropper('setCropBoxData', cropBoxData);
$image.cropper('setCanvasData', canvasData);
}
});
}).on('hidden.bs.modal', function () {
cropBoxData = $image.cropper('getCropBoxData');
canvasData = $image.cropper('getCanvasData');
$image.cropper('destroy');
});</pre>
</div>
</div>
<!-- Example 3 -->
<h3>Cropper with responsive container.</h3>
<div class="row">
<div class="col-sm-4">
<h5>Demo:</h5>
<button type="button" class="btn btn-primary" id="replace-toggle">Toggle</button>
<div class="cropper-example-3">
<img class="img-responsive" src="img/picture.jpg" alt="Picture">
</div>
</div>
<div class="col-sm-4">
<h5>HTML:</h5>
<pre class="prettyprint"><button class="btn btn-primary" id="replace-toggle" type="button">Toggle</button>
<div class="cropper-example-3">
<img src="img/picture.jpg" alt="Picture">
</div></pre>
<h5>CSS:</h5>
<pre class="prettyprint">.cropper-example-3 {
width: 100%;
}
.cropper-example-3 > img {
max-width: 100%;
}</pre>
</div>
<div class="col-sm-4">
<h5>JavaScript:</h5>
<pre class="prettyprint">var $image = $('.cropper-example-3 > img'),
replaced;
$image.cropper({
movable: false,
zoomable: false,
rotatable: false,
scalable: false
});
$('#replace-toggle').click(function () {
var url = 'img/picture-2.jpg';
if (replaced) {
url = 'img/picture.jpg';
}
$image.cropper('replace', url);
replaced = !replaced;
});</pre>
</div>
</div>
<!-- Example 4 -->
<h3>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="https://github.com/fengyuanchen/cropper/">GitHub</a>
<a href="https://github.com/fengyuanchen/cropper/issues">Issues</a>
<a href="https://github.com/fengyuanchen/cropper/releases">Releases</a>
<a href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a>
<a class="back-to-top" href="#top" title="Back to top">Back to top</a>
</div>
</footer>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.rawgit.com/fengyuanchen/tooltip/v0.0.2/dist/tooltip.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="https://fengyuanchen.github.io/js/common.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>