/home/mip/public_html/template/AdminLTE/plugins/cropper-master/docs/v0.7.9/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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-static-top docs-navbar-top" id="top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" 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="./">Cropper</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#overview">Overview</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="https://github.com/fengyuanchen/cropper">GitHub</a></li>
<li><a href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://chenfengyuan.com">About</a></li>
<li><a href="https://fengyuanchen.github.io/">More</a></li>
</ul>
</nav>
</div>
</header>
<!-- Banner -->
<div class="jumbotron docs-jumbotron">
<div class="container">
<h1>Cropper</h1>
<p>A simple jQuery image cropping plugin.</p>
<p>
<a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/archive/master.zip">Download</a>
<a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper">View on GitHub</a>
</p>
</div>
</div>
<!-- content -->
<!-- Overview -->
<div class="container docs-overview">
<h1 id="overview">Overview</h1>
<div class="row">
<div class="col-md-9">
<h3>Image:</h3>
<div class="img-container"><img src="img/picture-1.jpg"></div>
<div class="docs-toolbar">
<div class="btn-group">
<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("zoom", 0.1)">
<span class="glyphicon glyphicon-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("zoom", -0.1)">
<span class="glyphicon glyphicon-zoom-out"></span>
</span>
</button>
<button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", -90)">
<span class="glyphicon glyphicon-share-alt docs-flip-horizontal"></span>
</span>
</button>
<button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", 90)">
<span class="glyphicon glyphicon-share-alt"></span>
</span>
</button>
<button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "move")">
<span class="glyphicon glyphicon-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("setDragMode", "crop")">
<span class="glyphicon glyphicon-plus"></span>
</span>
</button>
<button class="btn btn-primary" data-method="clear" type="button" title="Clear">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("clear")">
<span class="glyphicon glyphicon-remove"></span>
</span>
</button>
<label class="btn btn-primary" for="inputImage" title="Upload image file">
<input class="hide" id="inputImage" name="file" type="file" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
<span class="glyphicon glyphicon-upload"></span>
</span>
</label>
<!-- <button class="btn btn-primary" id="download" type="button" title="Download cropped image">
<span class="docs-tooltip" data-toggle="tooltip" title="Export image with "getDataURL"">
<span class="glyphicon glyphicon-download"></span>
</span>
</button> -->
</div>
</div>
</div>
<div class="col-md-3">
<h3>Preview:</h3>
<div class="row">
<div class="col-md-8">
<div class="img-preview img-preview-sm"></div>
</div>
<div class="col-md-4">
<div class="img-preview img-preview-xs"></div>
</div>
</div>
<hr>
<h3>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">
<div class="docs-btn-group">
<h3>Methods:</h3>
<div class="button-group">
<button class="btn btn-warning" id="reset" data-method="reset" data-toggle="tooltip" type="button" title="$().cropper("reset")">Reset</button>
<button class="btn btn-warning" id="reset2" data-method="reset" data-option="true" data-toggle="tooltip" type="button" title="$().cropper("reset", true)">Reset (deep)</button>
<button class="btn btn-success" id="enable" data-method="enable" type="button">Enable</button>
<button class="btn btn-warning" id="disable" data-method="disable" type="button">Disable</button>
<button class="btn btn-primary" id="clear" data-method="clear" type="button">Clear</button>
<button class="btn btn-danger" id="destroy" data-method="destroy" type="button">Destroy</button>
<button class="btn btn-info" id="freeRatio" data-method="setAspectRatio" data-option="auto" data-toggle="tooltip" type="button" title="$().cropper("setAspectRatio", "auto")">Free Ratio</button>
<button class="btn btn-primary" id="setData" type="button" title="Set with the following data">Set Data</button>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="input-group">
<span class="input-group-addon">X</span>
<input class="form-control" id="setDataX" type="number" value="550">
<span class="input-group-addon">px</span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="input-group">
<span class="input-group-addon">Y</span>
<input class="form-control" id="setDataY" type="number" value="100">
<span class="input-group-addon">px</span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="input-group">
<span class="input-group-addon">Width</span>
<input class="form-control" id="setDataWidth" type="number" value="480">
<span class="input-group-addon">px</span>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="input-group">
<span class="input-group-addon">Height</span>
<input class="form-control" id="setDataHeight" type="number" value="270">
<span class="input-group-addon">px</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" id="zoom" type="button">Zoom</button>
</span>
<input class="form-control" id="zoomWith" type="number" value="0.5">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" id="rotate" type="button">Rotate</button>
</span>
<input class="form-control" id="rotateWith" type="number" value="45">
<span class="input-group-addon">deg</span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" id="replace" type="button">Replace</button>
</span>
<input class="form-control" id="replaceWith" type="text" value="img/picture-2.jpg" placeholder="Input image URL">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" id="setAspectRatio" type="button">Set Aspect Ratio</button>
</span>
<input class="form-control" id="setAspectRatioWith" type="text" value="0.618" placeholder="Input aspect ratio">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" id="getData" type="button">Get Data</button>
</span>
<input class="form-control" id="getDataInto" type="text">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-info" id="getImageData" type="button">Get Image Data</button>
</span>
<input class="form-control" id="getImageDataInto" type="text">
</div>
</div>
</div>
<div class="row docs-data-url">
<div class="col-sm-12">
<button class="btn btn-primary" id="getDataURL" data-toggle="tooltip" type="button" title="$().cropper("getDataURL")">Get Data URL</button>
<button class="btn btn-primary" id="getDataURL2" data-toggle="tooltip" type="button" title="$().cropper("getDataURL", "image/jpeg")">Get Data URL (JPG)</button>
<button class="btn btn-primary" id="getDataURL3" data-toggle="tooltip" type="button" title="$().cropper("getDataURL", {width: 160, height: 90})">Get Data URL (160*90)</button>
<button class="btn btn-primary" id="getDataURL4" data-toggle="tooltip" type="button" title="$().cropper("getDataURL", {width: 320, height: 180}, "image/jpeg", 0.8)">Get Data URL (320*180, JPG, 0.8)</button>
</div>
<div class="col-sm-6">
<textarea class="form-control" id="dataURLInto" rows="8"></textarea>
</div>
<div class="col-sm-6">
<div id="dataURLView"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h3>Options:</h3>
<form class="form-horizontal docs-options" role="form">
<div class="form-group">
<label class="col-xs-4 control-label">autoCrop:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="autoCrop1" name="autoCrop" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="autoCrop2" name="autoCrop" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">dragCrop:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="dragCrop1" name="dragCrop" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="dragCrop2" name="dragCrop" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">modal:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="modal1" name="modal" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="modal2" name="modal" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">dashed:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="dashed1" name="dashed" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="dashed2" name="dashed" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">movable:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="movable1" name="movable" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="movable2" name="movable" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">resizable:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="resizable1" name="resizable" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="resizable2" name="resizable" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">zoomable:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="zoomable1" name="zoomable" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="zoomable2" name="zoomable" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">rotatable:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="rotatable1" name="rotatable" type="radio" value="true" checked> Yes
</label>
<label class="btn btn-primary">
<input id="rotatable2" name="rotatable" type="radio" value="false"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-4 control-label">multiple:</label>
<div class="col-xs-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="multiple1" name="multiple" type="radio" value="true"> Yes
</label>
<label class="btn btn-primary active">
<input id="multiple2" name="multiple" type="radio" value="false" checked> No
</label>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="sources">
<h3>Sources:</h3>
<p>HTML:</p>
<pre class="prettyprint">...
<div class="img-container">
<img src="img/picture-1.jpg">
</div>
...
<div class="img-preview"></div>
...</pre>
<p>Javascript:</p>
<pre class="prettyprint">var $image = $(".img-container img"),
$dataX = $("#dataX"),
$dataY = $("#dataY"),
$dataHeight = $("#dataHeight"),
$dataWidth = $("#dataWidth");
$image.cropper({
aspectRatio: 16 / 9,
data: {
x: 480,
y: 60,
width: 640,
height: 360
},
preview: ".img-preview",
done: function(data) {
$dataX.val(Math.round(data.x));
$dataY.val(Math.round(data.y));
$dataHeight.val(Math.round(data.height));
$dataWidth.val(Math.round(data.width));
}
});
...
$("#reset").click(function() {
$image.cropper("reset");
});
...</pre>
</div>
</div>
<!-- Features -->
<div class="container">
<h1 id="features">Features</h1>
<ul>
<li>Supports touch</li>
<li>Supports zoom</li>
<li>Supports rotation</li>
<li>Supports canvas</li>
<li>Supports options</li>
<li>Supports methods</li>
<li>Supports events</li>
<li>Cross-browser support</li>
</ul>
</div>
<!-- Getting started -->
<div class="container docs-getting-started">
<h1 id="getting-started">Getting started</h1>
<div class="row">
<div class="col-md-9">
<!-- Installation -->
<h2 id="installation">Installation</h2>
<p>Include files:</p>
<pre class="prettyprint"><script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script></pre>
<!-- Usage -->
<h2 id="usage">Usage</h2>
<p>Initialize with <code>$.fn.cropper</code> method.</p>
<p>HTML:</p>
<pre class="prettyprint"><!-- Wrap the image with a block element -->
<div class="container">
<img src="picture.jpg">
</div></pre>
<p>Javascript:</p>
<pre class="prettyprint">$(".container > img").cropper({
aspectRatio: 1.618,
done: function(data) {
// Output the result data for cropping image.
}
});</pre>
<div class="alert alert-warning">
<p><strong>Notes:</strong></p>
<p>- The size of the cropper inherits from the size of the image's parent element, so be sure to wrap the image with a visible block element.</p>
<p>- The values of the result data was computed with the original size of the image, so you can use them to crop the image directly.</p>
</div>
<!-- Options -->
<h2 id="options">Options</h2>
<p>You may set cropper options with <code>$().cropper(options)</code>.</p>
<p>If you want to change the global default options, You may use <code>$.fn.cropper.setDefaults(options)</code>.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>aspectRatio</td>
<td>string / number</td>
<td><code>"auto"</code></td>
<td>The aspect ratio of the cropping zone. <br>By default, the cropping zone is free ratio.</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td><code>{}</code></td>
<td>Only supports four properties: "x", "y", "width" and "height". By default, the cropping zone will appear in the center of the image.</td>
</tr>
<tr>
<td>done</td>
<td>function</td>
<td><code>function (data) {}</code></td>
<td>This function will be executed when the cropping zone changes by a move, resize or crop.</td>
</tr>
<tr>
<td>preview</td>
<td>selector</td>
<td><code>""</code></td>
<td>A jquery selector, add extra elements for preview.</td>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td><code>false</code></td>
<td>By default, the plugin only supports one cropper per page. If you intend to use more than one, just initialize them with this option set to <code>true</code>.</td>
</tr>
<tr>
<td>modal</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Show (true) or hide (false) the black modal layer above the cropper.</td>
</tr>
<tr>
<td>dashed</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Show (true) or hide (false) the dashed lines above the cropping zone.</td>
</tr>
<tr>
<td>autoCrop</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Render the cropping zone automatically when initialize.</td>
</tr>
<tr>
<td>autoCropArea</td>
<td>number</td>
<td><code>0.8</code></td>
<td>A number between 0 and 1. Define the automatic cropping area size (percentage).</td>
</tr>
<tr>
<td>dragCrop</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Enable to remove the current cropping zone and create a new one by dragging over the image.</td>
</tr>
<tr>
<td>movable</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Enable to move the cropping zone.</td>
</tr>
<tr>
<td>resizable</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Enable to resize the cropping zone.</td>
</tr>
<tr>
<td>zoomable</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Enable to zoom the image.</td>
</tr>
<tr>
<td>rotatable</td>
<td>boolean</td>
<td><code>true</code></td>
<td>Enable to rotate the image.</td>
</tr>
<tr>
<td>checkImageOrigin</td>
<td>boolean</td>
<td><code>true</code></td>
<td>By default, the plugin will check the image origin, and if it is a cross-origin image, a "crossOrigin" attribute will be added to the image element to enable "rotate" and "getDataURL".</td>
</tr>
<tr>
<td>minWidth</td>
<td>number</td>
<td><code>0</code></td>
<td>The minimum width (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this minimum width.</td>
</tr>
<tr>
<td>minHeight</td>
<td>number</td>
<td><code>0</code></td>
<td>The minimum height (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this minimum height.</td>
</tr>
<tr>
<td>maxWidth</td>
<td>number</td>
<td><code>Infinity</code></td>
<td>The maximum width (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this maximum width.</td>
</tr>
<tr>
<td>maxHeight</td>
<td>number</td>
<td><code>Infinity</code></td>
<td>The maximum height (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this maximum height.</td>
</tr>
<tr>
<td>minContainerWidth</td>
<td>number</td>
<td><code>300</code></td>
<td>The minimum width of the cropper container.</td>
</tr>
<tr>
<td>minContainerHeight</td>
<td>number</td>
<td><code>150</code></td>
<td>The minimum height of the cropper container.</td>
</tr>
<tr>
<td>build</td>
<td>function</td>
<td><code>null</code></td>
<td>An event handler of the "build.cropper" event.</td>
</tr>
<tr>
<td>built</td>
<td>function</td>
<td><code>null</code></td>
<td>An event handler of the "built.cropper" event.</td>
</tr>
<tr>
<td>dragstart</td>
<td>function</td>
<td><code>null</code></td>
<td>An event handler of the "dragstart.cropper" event.</td>
</tr>
<tr>
<td>dragmove</td>
<td>function</td>
<td><code>null</code></td>
<td>An event handler of the "dragmove.cropper" event.</td>
</tr>
<tr>
<td>dragend</td>
<td>function</td>
<td><code>null</code></td>
<td>An event handler of the "dragend.cropper" event.</td>
</tr>
</tbody>
</table>
</div>
<!-- Methods -->
<h2 id="methods">Methods</h2>
<h4>zoom</h4>
<ul>
<li>Zoom the image.</li>
<li>Param: a number (positive number for zoom in, negative number for zoom out).</li>
<li>Usage: <code>$().cropper("zoom", 0.1)</code> or <code>$().cropper("zoom", -0.1)</code></li>
</ul>
<h4>rotate</h4>
<ul>
<li>Rotate the image (Replace the original image with a new rotated image which was generated by canvas)</li>
<li>Param: a number (positive number for rotate right, negative number for rotate left)..</li>
<li>Usage: <code>$().cropper("rotate", 180)</code> or <code>$().cropper("rotate", -180)</code></li>
<li>Note: Be sure the browser supports canvas before call this method.</li>
</ul>
<h4>enable</h4>
<ul>
<li>Enable (unfreeze) the cropper</li>
<li>Usage: <code>$().cropper("enable")</code></li>
</ul>
<h4>disable</h4>
<ul>
<li>Disable (freeze) the cropper</li>
<li>Usage: <code>$().cropper("disable")</code></li>
</ul>
<h4>reset</h4>
<ul>
<li>Reset the cropping zone to the start state.</li>
<li>Add a <code>true</code> param to reset the cropping zone to the default state.</li>
<li>Usage: <code>$().cropper("reset")</code> or <code>$().cropper("reset", true)</code></li>
</ul>
<h4>clear</h4>
<ul>
<li>Clear the cropping zone.</li>
<li>Usage: <code>$().cropper("clear")</code>.</li>
</ul>
<h4>replace</h4>
<ul>
<li>Replace the image.</li>
<li>Usage: <code>$().cropper("replace", "example.jpg")</code>.</li>
</ul>
<h4>destroy</h4>
<ul>
<li>Destroy the cropper and remove the instance from the image.</li>
<li>Usage: <code>$().cropper("destroy")</code>.</li>
</ul>
<h4>getData</h4>
<ul>
<li>Get the cropped zone data. Add a <code>true</code> parameter to get rounded data.</li>
<li>Usage: <code>$().cropper("getData")</code> or <code>$().cropper("getData", true)</code>.</li>
</ul>
<h4>setData</h4>
<ul>
<li>Reset the cropped zone with new data.</li>
<li>Param: an object containing "x1", "y1", "width", "height".</li>
<li>Usage: <code>$().cropper("setData", {width: 480, height: 270})</code>.</li>
<li><strong>Tip</strong>: If you want to remove the current data, just pass an empty object or <code>null</code>. For example: <code>$().cropper("setData", {})</code> or <code>$().cropper("setData", null)</code>.</li>
</ul>
<h4>setAspectRatio</h4>
<ul>
<li>Enable to reset the aspect ratio after built.</li>
<li>Param: "auto" or a positive number ("auto" for free ratio).</li>
<li>Usage: <code>$().cropper("setAspectRatio", 1.618)</code>.</li>
</ul>
<h4>getImageData</h4>
<ul>
<li>Get an object containing image data, contains: "naturalWidth", "naturalHeight", "width", "height", "aspectRatio", "ratio" and "rotate".</li>
<li>The "aspectRatio" is the value of "naturalWidth / naturalHeight".</li>
<li>The "ratio" is the value of "width / naturalWidth".</li>
<li>The "rotate" is the rotated degree of the current image.</li>
<li>Usage: <code>$().cropper("getImageData")</code>.</li>
</ul>
<h4>setDragMode</h4>
<ul>
<li>Change the drag mode.</li>
<li>Params: "crop", "move" and "none".</li>
<li>Usage: <code>$().cropper("setDragMode", "crop")</code>.</li>
<li><strong>Tips: </strong>You can toggle the "crop" and "move" mode by double click on the image.</li>
</ul>
<h4>getDataURL([options[, type[, quality]]])</h4>
<ul>
<li>Get the data url (base64 image) of the cropped zone.</li>
<li>Param @options: A <code>Object</code> contains: "width", "height". Define the sizes of the result image.</li>
<li>Param @type: A <code>String</code> indicating the image format. The default type is image/png. Other types: "image/jpeg", "image/webp".</li>
<li>Param @quality: A <code>Number</code> between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.</li>
<li>Usage: <code>$().cropper("getDataURL")</code> or <code>$().cropper("getDataURL", {width:100, height: 100}, "image/jpeg", 0.6)</code> or <code>$().cropper("getDataURL", "image/jpeg")</code> or <code>$().cropper("getDataURL", "image/jpeg", 0.6)</code>.</li>
<li><strong>Note: </strong>Be sure the browser supports canvas before call this method.</li>
</ul>
<!-- Events -->
<h2 id="events">Events</h2>
<h4>build.cropper</h4>
<p>This event will be fired when the Cropper starts to build.</p>
<h4>built.cropper</h4>
<p>This event will be fired when the Cropper has been built.</p>
<h4>dragstart.cropper</h4>
<p>This event will be fired before the cropping zone start to move.</p>
<h4>dragmove.cropper</h4>
<p>This event will be fired when the cropping zone was moving.</p>
<h4>dragend.cropper</h4>
<p>This event will be fired after the cropping zone stop to move.</p>
</div>
<div class="col-md-3">
<div class="hidden-print docs-sidebar" role="complementary">
<ul class="nav">
<li><a href="#installation">Installation</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#events">Events</a></li>
</ul>
<a class="btn btn-link back-to-top" href="#top">Back to top</a>
</div>
</div>
</div>
</div>
<!-- Examples -->
<div class="container docs-examples">
<h1 id="examples">Examples</h1>
<h3>Cropper with fixed dragger.</h3>
<div class="row">
<div class="col-sm-7">
<p>Demo:</p>
<div class="fixed-dragger-cropper">
<img src="img/picture-1.jpg" alt="Picture">
</div>
</div>
<div class="col-sm-5">
<p>HTML:</p>
<pre class="prettyprint"><div class="fixed-dragger-cropper">
<img src="img/picture-1.jpg">
</div></pre>
<p>JavaScript:</p>
<pre class="prettyprint">$(".fixed-dragger-cropper > img").cropper({
aspectRatio: 640 / 320,
autoCropArea: 0.6, // Center 60%
multiple: false,
dragCrop: false,
dashed: false,
movable: false,
resizable: false,
built: function () {
$(this).cropper("zoom", 0.5);
}
});</pre>
</div>
</div>
<br>
<h3>Cropper in a Bootstrap modal</h3>
<div class="row">
<div class="col-sm-6">
<p>HTML:</p>
<pre class="prettyprint"><div class="modal" id="bootstrap-modal">
<div class="modal-dialog">
...
<div class="modal-body">
<div class="bootstrap-modal-cropper">
<img src="img/picture-1.jpg">
</div>
</div>
...
</div>
</div></pre>
<p>Demo:</p>
<p><button class="btn btn-primary" data-target="#bootstrap-modal" data-toggle="modal" type="button">Launch the demo</button></p>
<div class="modal fade" id="bootstrap-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">×</button>
<h4 class="modal-title" id="bootstrap-modal-label">Cropper</h4>
</div>
<div class="modal-body">
<div class="bootstrap-modal-cropper"><img src="img/picture-1.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>
</div>
<div class="col-sm-6">
<p>JavaScript:</p>
<pre class="prettyprint">var $image = $(".bootstrap-modal-cropper > img"),
originalData = {};
$("#bootstrap-modal").on("shown.bs.modal", function() {
$image.cropper({
multiple: true,
data: originalData,
done: function(data) {
console.log(data);
}
});
}).on("hidden.bs.modal", function() {
originalData = $image.cropper("getData");
$image.cropper("destroy");
});
</pre>
</div>
</div>
<br>
<h3>Crop avatar <small>A complete example</small></h3>
<p>This example require a <strong>PHP</strong> server, please download and test it.</p>
<p>
<a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/archive/master.zip">Download</a>
<a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar">View the sources</a>
</p>
</div>
<!-- footer -->
<footer class="docs-footer">
<div class="container clearfix">
<div class="btn-group pull-left">
<a class="btn btn-link" href="https://github.com/fengyuanchen/cropper/">GitHub</a>
<a class="btn btn-link" href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a>
</div>
<div class="btn-group pull-right">
<a class="btn btn-link" href="#top" title="Back to top">Back to top</a>
</div>
</div>
</footer>
<!-- Alert -->
<div class="docs-alert"><span class="warning message"></span></div>
<script src="https://code.jquery.com/jquery-1.12.4.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>