Home

Awesome

<lit-image-cropper>

Published on npm Mentioned in Awesome Lit

Lightweight and efficient web component for cropping images. Built with Lit, it provides a simple yet powerful solution for integrating image cropping functionality into your web applications.

Live Demo

Features

Installation

Install lit-image-cropper from NPM:

npm install lit-image-cropper
# or
yarn add lit-image-cropper

Usage

After installation, import the component into your project:

import 'lit-image-cropper';

Then, you can use the component in your HTML as follows:

<lit-image-cropper src="path/to/image"></lit-image-cropper>

This will render an image cropper component with the specified image.

Attributes

The lit-image-cropper component supports the following attributes to provide additional flexibility:

NameTypeDescriptionDefault
srcStringPath to the image that will be loaded for cropping.

Events

The component emits several custom events that you can listen to for more control:

Event NameDescription
@on-image-croppedFired after the image has been cropped, containing the cropped image data.

Contributing

Contributions are welcome! If you have ideas for new features, bug fixes, or improvements, feel free to fork the repository and submit a pull request.

Steps to Contribute

  1. Fork the repository: Click the "Fork" button at the top of this page.
  2. Create a branch: Create a new branch for your feature or fix.
  3. Make your changes: Implement your changes and commit them.
  4. Push to the branch: Push your changes to your forked repository.
  5. Submit a pull request: Open a pull request to the main repository, describing your changes.

Development Setup

To set up the development environment:

  1. Clone the repository:

    git clone git@github.com:andy-austin/lit-image-cropper.git
    cd lit-image-cropper
    
  2. Install dependencies:

    yarn install
    
  3. Start the development server:

    yarn dev
    

License

This project is licensed under the MIT License. See the LICENSE file for more details.