area-selection-js
Version:
Simple and easy area selection library for image/video cropping
40 lines (35 loc) • 926 B
HTML
<html>
<head>
<script src="dist/area-selection.umd.js"></script>
<link rel="stylesheet" href="dist/area-selection.css">
</head>
<style>
.modal {
padding: 18px;
position: absolute;
border: 1px solid lightgrey;
left: 50%;
transform: translateX(-50%);
width: 300px;
}
.modal img {
max-width: 100%;
}
</style>
<body>
<h1>area-selection.js</h1>
<div class="modal">
<img src="https://unsplash.it/500/500/?random" alt="" id="selection">
</div>
<script>
var selection = new AreaSelection('#selection', {
aspectRatio: 16 / 9,
onInitialize: (instance) => { console.log(instance); },
onSelectStart: (data) => { console.log('start', data); },
onSelectEnd: (data) => { console.log('end', data); },
onSelectMove: (data) => { console.log('move', data); }
});
</script>
</body>
</html>