auto-clippath

TypeScript-based library for generating CSS/SVG clipPath coordinates from images with transparent backgrounds.

Demo

• https://rjct.github.io/auto-clippath/demo

TypeScript Usage

To use the library with TypeScript, you need to install the module using npm: npm install auto-clippath

Or using Yarn: yarn add auto-clippath Then you can import any function as follows:

import autoClipPath from 'auto-clippath';

const { clipPath } = await autoClipPath(
    HTMLImageElement,
    { width: 100, height: 200 },
    
    // Optional
    { 
        gap: 5,                 // Additional space around the detected area
        distance: 5,            // Minimal distance between path points
        shift: { x: 5, y: 5 }   // Shift detected area, useful for sprites
    }
); // returns array of path points { x: number, y: number }[]

Browser Usage

The library can also be used directly in browsers without TypeScript. First, download the auto-clippath.min.js file from the GitHub repository. Then use the autoClipPath or window.autoClipPath.

<script src="auto-clippath-browser.mjs" type="module"></script>
<script>
    const { clipPath } = await autoClipPath(
        HTMLImageElement, 
        { width: 100, height: 200 },

        // Optional
        {
            gap: 5,                 // Additional space around the detected area
            distance: 5,            // Minimal distance between path points
            shift: { x: 5, y: 5 }   // Shift detected area, useful for sprites
        }
    );
    
    console.log(clipPath);  // Array of path points { x: number, y: number }[]