example.html
<!DOCTYPE html>
<html>
<head>
<title>Cropper Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="build/cropper.css">
<style type="text/css">
img {
display: block;
margin: 3em auto;
position: relative;
top: -14px;
}
.cropped {
box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
.controls {
text-align: center;
}
#crop { display: block; margin: 12px auto; }
</style>
</head>
<body>
<div class="controls">
<label>
Ratio
<select>
<option>None</option>
<option value="square">Square</option>
<option value="3:2">3:2</option>
<option value="4:3">4:3</option>
<option value="5:2">5:2</option>
<option value="5:4">5:4</option>
<option value="6:4">6:4</option>
<option value="7:5">7:5</option>
<option value="10:8">10:8</option>
<option value="16:9">16:9</option>
</select>
<button id="ratio">Apply</button>
</label>
<button id="crop">Crop!</button>
</div>
<img src="grumpy-cat-example.jpg" alt="grumpy"/>
<script src="build/cropper.js"></script>
<script>
window.onload = function () {
var Cropper = require('cropper'),
crop = new Cropper(document.querySelector('img'));
document.getElementById('crop').addEventListener('click', function () {
var img = document.querySelector('img');
img.parentNode.removeChild(img);
img = document.createElement('img');
img.src = crop.get();
img.className = 'cropped';
document.body.appendChild(img);
crop.destroy();
var controls = document.querySelector('.controls');
controls.parentNode.removeChild(controls);
});
document.getElementById('ratio').addEventListener('click', function () {
var select = document.querySelector('select');
crop.setRatio(select.options[select.selectedIndex].value);
});
};
</script>
</body>
</html>