Polygon-crop-tool NPM

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.

polygon cropping

How to use

Install

npm i polygon-crop-tool

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}/>

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>