Polygon Cropping Tool
Cropping tool made for Svelte using HTML5 Canvas. Play with the demo here.
Features
- Upload file
- Polygon cropping
- Rectangle cropping
- Undo, Redo, Reset
- Manage crops
- Save crops (as .json and .png)
Example of Polygon Cropping
In polygon crop mode, users can hold the shift key to draw vertical / horizontal lines.
How to use
- Install
npm i polygon-crop-tool- Add to your project
The variables
allCrops,filename, andcoloursmust be specified.
// routes/+page.svelte
<script>
import {Cropper, Cropped} from 'polygon-crop-tool';
// variables to download all the cropped images
let allCrops = [];
let filename;
// colours
let colours = {
primary: '#FF6B6B', // cropping lines + fill
secondary: '#4ECDC4', // axis lines
tooltip: '#121212',
tooltip_text: '#FFFFFF',
}
</script>
<Cropper
cwidth=500 // determines the width of the canvas
cheight=750 // determines the height of the canvas (before an image is loaded)
colours={colours}
bind:allCrops={allCrops}
bind:filename={filename}
/>
<Cropped colours={colours} bind:allCrops={allCrops} bind:filename={filename}/>- Done!
Additional Info
Styling can be done to make <Cropper /> and <Cropped /> look better.
<script>
import {Cropper, Cropped} from 'polygon-crop-tool';
let allCrops = [];
let filename;
let colours = {
primary: '#FF6B6B', // cropping lines + fill
secondary: '#4ECDC4', // axis lines
tooltip: '#121212',
tooltip_text: '#FFFFFF',
}
// media query
let innerWidth;
</script>
<svelte:window bind:innerWidth={innerWidth}/>
<!-- App can only be used on tablet size and up. -->
<div class="main-body" class:hide="{innerWidth < 767}">
<Cropper cwidth=500 cheight=750 colours={colours} bind:allCrops={allCrops} bind:filename={filename}/>
<Cropped colours={colours} bind:allCrops={allCrops} bind:filename={filename}/>
</div>
<div class:hide="{innerWidth > 767}">
<p>Seems like the screen is too small!</p>
</div>
<style>
.main-body {
background: #FFFFFF;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.hide {
display: none !important;
}
@media screen and (min-width: 1025px) {
:global(.cropper-wrapper) {
justify-content: end !important;
}
}
/* add all additional styling here, using :global() */
</style>Upcoming features
- Circular cropping