jcrop3
Version:
The Javascript cropping widget
59 lines (47 loc) • 1.6 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;">- Aspect Ratio + SVG</span>
</h1>
<img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">
<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>
</div>
</div>
<div id="ext">
<img src="./js.svg" id="img">
</div>
<script src="../dist/jcrop.js"></script>
<script>
const jcp = Jcrop.attach('target',{multi:false});
const rect = Jcrop.Rect.fromPoints([100,100],[300,300]);
const crop = jcp.newWidget(rect,{
aspectRatio: rect.aspect,
canRemove: false
});
const img = document.getElementById('img');
crop.el.appendChild(img);
function setImage(tag){
document.getElementById('target').src =
'https://d3o1694hluedf9.cloudfront.net/'+tag;
}
function anim(){
if (!jcp.active) return false;
const animtype = document.getElementById('animtype').value;
jcp.active.animate(rrect(),null,animtype);
jcp.focus();
}
</script>
</body>
</html>