2017-11-06 18:32:29 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<style>
|
2018-01-16 01:13:45 +03:00
|
|
|
|
2018-01-17 03:32:52 +03:00
|
|
|
label {
|
|
|
|
|
margin: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
label label {
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2018-01-16 01:13:45 +03:00
|
|
|
button {
|
|
|
|
|
border: none;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
2018-01-17 03:32:52 +03:00
|
|
|
input[type=checkbox],
|
2018-01-16 03:07:53 +03:00
|
|
|
input[type=radio] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
input:not(:checked) ~ * {
|
2018-01-17 03:58:13 +03:00
|
|
|
opacity: 0.3;
|
|
|
|
|
}
|
|
|
|
|
input:hover:not(:checked) ~ * {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
input:not(:checked) ~ sub:hover,
|
|
|
|
|
input:not(:checked) ~ sub {
|
|
|
|
|
opacity: 0.3;
|
2018-01-16 03:07:53 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.material-icons {
|
2018-01-16 01:13:45 +03:00
|
|
|
font-size: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
2018-01-17 03:32:52 +03:00
|
|
|
sub .material-icons {
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
}
|
2018-01-16 01:13:45 +03:00
|
|
|
|
|
|
|
|
.crop {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
|
|
|
|
border: solid 1px black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin-left: -8.5px;
|
|
|
|
|
margin-top: -8.5px;
|
|
|
|
|
|
|
|
|
|
border: solid 1px black;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center:before {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
|
|
|
|
|
bottom: 50%;
|
|
|
|
|
right: 50%;
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin-right: -0.5px;
|
|
|
|
|
margin-bottom: -0.5px;
|
|
|
|
|
|
|
|
|
|
border-bottom: solid 1px black;
|
|
|
|
|
border-right: solid 1px black;
|
|
|
|
|
}
|
|
|
|
|
.center:after {
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin-top: -0.5px;
|
|
|
|
|
margin-left: -0.5px;
|
|
|
|
|
|
|
|
|
|
border-top: solid 1px black;
|
|
|
|
|
border-left: solid 1px black;
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-06 18:32:29 +03:00
|
|
|
</style>
|
2018-01-16 01:13:45 +03:00
|
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../css/fonts.css">
|
2017-11-06 18:32:29 +03:00
|
|
|
|
|
|
|
|
<script src="../ext-lib/jquery.js"></script>
|
|
|
|
|
<script src="../ext-lib/jquery-ui.js"></script>
|
2018-01-17 03:32:52 +03:00
|
|
|
<script src="../ext-lib/jquery.ui.touch-punch.min.js"></script>
|
2017-11-06 18:32:29 +03:00
|
|
|
|
|
|
|
|
<script src="../lib/jli.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
2018-01-16 01:13:45 +03:00
|
|
|
|
|
|
|
|
var ORIGINAL = 1
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
|
$('.crop')
|
|
|
|
|
.resizable({
|
|
|
|
|
handles: 'all',
|
|
|
|
|
})
|
|
|
|
|
.draggable()
|
|
|
|
|
$('.crop .center')
|
|
|
|
|
.draggable()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function setRatio(ratio){
|
|
|
|
|
var crop = $('.crop')
|
2018-01-17 03:09:22 +03:00
|
|
|
|
|
|
|
|
crop
|
2018-01-16 01:13:45 +03:00
|
|
|
.resizable("option", "aspectRatio", ratio)
|
2018-01-17 03:09:22 +03:00
|
|
|
// XXX this feels like a hack but it works...
|
|
|
|
|
.data('uiResizable')._aspectRatio = ratio
|
2018-01-16 01:13:45 +03:00
|
|
|
|
|
|
|
|
if(ratio === false){
|
2018-01-17 05:13:11 +03:00
|
|
|
$('#lock-ratio')[0].checked = false
|
2018-01-16 01:13:45 +03:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var w = crop.width()
|
|
|
|
|
var h = crop.height()
|
|
|
|
|
|
|
|
|
|
// resize...
|
|
|
|
|
var t = w + h
|
|
|
|
|
h = t / (ratio + 1)
|
|
|
|
|
w = t - h
|
|
|
|
|
crop
|
|
|
|
|
.height(h)
|
|
|
|
|
.width(w)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function flip(){
|
|
|
|
|
var crop = $('.crop')
|
|
|
|
|
var r = crop.resizable("option", "aspectRatio")
|
2018-01-17 03:09:22 +03:00
|
|
|
|
|
|
|
|
if(r > 0){
|
|
|
|
|
setRatio(1/r)
|
|
|
|
|
|
|
|
|
|
// no aspect ratio defined, just switch...
|
|
|
|
|
} else {
|
|
|
|
|
var w = crop.width()
|
|
|
|
|
var h = crop.height()
|
|
|
|
|
|
|
|
|
|
crop
|
|
|
|
|
.height(w)
|
|
|
|
|
.width(h)
|
|
|
|
|
}
|
2018-01-16 01:13:45 +03:00
|
|
|
}
|
|
|
|
|
|
2018-01-17 03:58:13 +03:00
|
|
|
function toggleLock(m){
|
2018-01-17 03:32:52 +03:00
|
|
|
var crop = $('.crop')
|
2018-01-17 05:13:11 +03:00
|
|
|
var r = m || crop.resizable("option", "aspectRatio")
|
2018-01-17 03:32:52 +03:00
|
|
|
|
2018-01-17 05:13:11 +03:00
|
|
|
if(r === false){
|
2018-01-17 03:32:52 +03:00
|
|
|
var w = crop.width()
|
|
|
|
|
var h = crop.height()
|
|
|
|
|
|
2018-01-17 03:58:13 +03:00
|
|
|
$('#lock-ratio')[0].checked = true
|
2018-01-17 03:32:52 +03:00
|
|
|
setRatio(w/h)
|
|
|
|
|
|
|
|
|
|
} else {
|
2018-01-17 03:58:13 +03:00
|
|
|
$('#lock-ratio')[0].checked = false
|
2018-01-17 03:32:52 +03:00
|
|
|
setRatio(false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2017-11-06 18:32:29 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2018-01-16 01:13:45 +03:00
|
|
|
<button><span title="toggle crop on/off" class="material-icons">crop</span></button>
|
2018-01-16 03:07:53 +03:00
|
|
|
<label>
|
2018-01-17 03:32:52 +03:00
|
|
|
<input type="radio" name="ratio" checked onclick="setRatio(false)">
|
2018-01-16 03:07:53 +03:00
|
|
|
<span class="material-icons">crop_free</span>
|
2018-01-17 03:32:52 +03:00
|
|
|
<sub>
|
|
|
|
|
<label>
|
|
|
|
|
<input id="lock-ratio" type="checkbox" onclick="toggleLock()">
|
|
|
|
|
<span class="material-icons">lock</span>
|
|
|
|
|
</label>
|
|
|
|
|
</sub>
|
2018-01-16 03:07:53 +03:00
|
|
|
</label>
|
|
|
|
|
<label>
|
2018-01-17 03:32:52 +03:00
|
|
|
<input type="radio" name="ratio" onclick="setRatio(ORIGINAL)">
|
2018-01-16 03:07:53 +03:00
|
|
|
<span title="original ratio" class="material-icons">crop_original</span>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="radio" name="ratio" onclick="setRatio(1)">
|
|
|
|
|
<span class="material-icons">crop_square</span>
|
|
|
|
|
<span>1:1</span>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="radio" name="ratio" onclick="setRatio(3/2)">
|
|
|
|
|
<span class="material-icons">crop_3_2</span>
|
|
|
|
|
<span>3:2</span>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<input type="radio" name="ratio" onclick="setRatio(16/9)">
|
|
|
|
|
<span class="material-icons">crop_16_9</span>
|
|
|
|
|
<span>16:9</span>
|
|
|
|
|
</label>
|
2018-01-16 01:13:45 +03:00
|
|
|
<button onclick="flip()"><span class="material-icons">crop_rotate</span></button>
|
2018-01-17 03:58:13 +03:00
|
|
|
<button><span class="material-icons">clear</span></button>
|
2018-01-16 01:13:45 +03:00
|
|
|
|
2018-01-16 03:07:53 +03:00
|
|
|
<br>
|
|
|
|
|
<pre>
|
|
|
|
|
TODO:
|
2018-01-17 05:13:11 +03:00
|
|
|
- rotation and rotation handle
|
2018-01-16 03:07:53 +03:00
|
|
|
- touch
|
|
|
|
|
- multitouch
|
|
|
|
|
- center point
|
|
|
|
|
</pre>
|
|
|
|
|
|
2017-11-06 18:32:29 +03:00
|
|
|
|
2018-01-16 01:13:45 +03:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="crop">
|
|
|
|
|
<div class="center">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-11-08 06:09:49 +03:00
|
|
|
|
|
|
|
|
|
2017-11-06 18:32:29 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
2018-01-16 01:13:45 +03:00
|
|
|
<!-- vim:set sw=4 ts=4 : -->
|
