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

1. Install

npm i polygon-crop-tool

2. Add to your project The variables allCrops, filename, and colours must 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}/>

3. 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