Skip to content

andy-austin/lit-image-cropper

Repository files navigation

<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

  • Easy to Use: Simple API with minimal setup.
  • Responsive Design: Automatically adjusts to different screen sizes.
  • Performance Optimized: Lightweight and fast, with minimal impact on page load times.
  • Modern Technology: Built with Lit, leveraging Web Components for wide compatibility.

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:

Name Type Description Default
src String Path 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 Name Description
@on-image-cropped Fired 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.

About

Fast and easy image cropping web component built with Lit

Resources

License

Stars

Watchers

Forks

Packages

No packages published