jcrop3
Version:
The Javascript cropping widget
107 lines (96 loc) • 3.56 kB
HTML
<html>
<head>
<title>Jcrop Example</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../dist/jcrop.css" />
</head>
<body>
<div style="padding:0 5%;">
<h1 style="font-family:Helvetica,sans-serif;">
Jcrop Example <span style="color:lightgray;">- draw some crops!</span>
</h1>
<img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
<div style="margin-top:0.5em;">
<select id="animtype">
<option>swing</option>
<option>inQuad</option>
<option>outQuad</option>
<option>inOutQuad</option>
<option>inCubic</option>
<option>outCubic</option>
<option>inOutCubic</option>
<option>inQuart</option>
<option>outQuart</option>
<option>inOutQuart</option>
<option>inQuint</option>
<option>outQuint</option>
<option>inOutQuint</option>
<option>inSine</option>
<option>outSine</option>
<option>inOutSine</option>
<option>inExpo</option>
<option>outExpo</option>
<option selected>inOutExpo</option>
<option>inCirc</option>
<option>outCirc</option>
<option>inOutCirc</option>
<option>inElastic</option>
<option>outElastic</option>
<option>inOutElastic</option>
<option>inBack</option>
<option>outBack</option>
<option>inOutBack</option>
<option>inBounce</option>
<option>outBounce</option>
<option>inOutBounce</option>
</select>
<button onclick="anim()">Animate</button>
</div>
<div style="margin-top:0.5em;">
<button onclick="setImage('market-750.jpg')">Market</button>
<button onclick="setImage('sierra-750.jpg')">Sierra</button>
<button onclick="setImage('img/sierra.jpg')">Sierra2</button>
<button onclick="setImage('img/lake.jpg')">Lake</button>
<br>
<button onclick="jcp.setOptions({shadeColor:'red'});">Red</button>
<button onclick="jcp.setOptions({shadeColor:'blue'});">Blue</button>
<button onclick="jcp.setOptions({shadeColor:'yellow'});">Yellow</button>
<button onclick="jcp.setOptions({shadeColor:'black'});">Black</button>
<br>
<button onclick="jcp.setOptions({shadeOpacity:0.2});">Low</button>
<button onclick="jcp.setOptions({shadeOpacity:0.55});">Medium</button>
<button onclick="jcp.setOptions({shadeOpacity:0.8});">High</button>
<button onclick="jcp.setOptions({shadeOpacity:0.95});">Full</button>
</div>
</div>
<script src="../dist/jcrop.js"></script>
<script>
var jcp;
Jcrop.load('target').then(img => {
jcp = Jcrop.attach(img,{multi:true});
const rect = Jcrop.Rect.sizeOf(jcp.el);
jcp.newWidget(rect.scale(.7,.5).center(rect.w,rect.h));
jcp.focus();
});
function setImage(tag){
document.getElementById('target').src =
'https://d3o1694hluedf9.cloudfront.net/'+tag;
}
function rcoord() {
const w = jcp.el.offsetWidth;
const h = jcp.el.offsetHeight;
return [Math.round(Math.random()*w), Math.round(Math.random()*h)];
}
function rrect() {
return Jcrop.Rect.fromCoords(rcoord(),rcoord());
}
function anim(){
if (!jcp.active) return false;
const animtype = document.getElementById('animtype').value;
jcp.active.animate(rrect(),null,animtype);
jcp.focus();
}
</script>
</body>
</html>