@creaditor/image-editor

A powerful, feature-rich web-based image editor built with Lit and Fabric.js. This component provides a complete image editing solution with cropping, text editing, shape drawing, and more.

Features

- 🖼️ Image Upload & Gallery: Upload images or choose from a built-in gallery
- ✂️ Crop & Resize: Advanced cropping with aspect ratio controls and resize handles
- 📝 Text Editing: Add and edit text with rich formatting options
- 🔷 Shape Drawing: Draw various shapes (rectangles, circles, lines)
- 🎨 Canvas Manipulation: Resize canvas, zoom, and pan functionality
- 🌐 Internationalization: Multi-language support
- 📱 Responsive Design: Works on desktop and mobile devices
- ⚡ Web Components: Built with Lit for easy integration

Installation

``bash
npm install @creaditor/image-editor
`

Quick Start

`html






width="800"
height="600"
lang="en">





`

Usage

$3

`javascript
import '@creaditor/image-editor/my-element.js';

// Get the editor element
const editor = document.querySelector('cdtr-image-editor');

// Set initial image
editor.imageUrl = 'https://example.com/image.jpg';

// Listen for save events
editor.addEventListener('save-image', (event) => {
const { canvas, width, height, imageWidth, imageHeight, cmds } = event.detail;
const image = cmds.getImage();
// Handle the saved image data
});
`

$3

You can control the size of uploaded images using the imageWidth and imageHeight properties:

`html
width="800"
height="600"
imageWidth="400"
imageHeight="300"
lang="en">

`

When specified, uploaded images will be scaled to fit within these dimensions while maintaining their aspect ratio. If not specified, images will be scaled to fit within 80% of the canvas dimensions.

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| width | Number | 800 | Canvas width in pixels |
| height | Number | 600 | Canvas height in pixels |
| imageWidth | Number | undefined | Desired width of uploaded images in pixels |
| imageHeight | Number | undefined | Desired height of uploaded images in pixels |
| lang | String | 'en' | Language code for internationalization |
| imageUrl | String | undefined | Initial image URL to load |
| galleryImages | Array | [] | Array of gallery images |

$3

| Event | Detail | Description |
|-------|--------|-------------|
| save-image | {canvas, width, height, imageWidth, imageHeight, cmds} | Fired when image is saved |
| image-uploaded | {file: File} | Fired when new image is uploaded |
| canvas-resized | {width: number, height: number} | Fired when canvas is resized |

API Reference

$3

#### addImage(file: File)
Adds an image to the canvas from a File object.

#### loadImageFromUrl(url: string)
Loads an image from a URL.

#### saveImage()
Saves the current canvas as an image and triggers the save-image event.

#### clearCanvas()
Clears the entire canvas.

$3

The component uses CSS custom properties for theming:

`css
cdtr-image-editor {
--primary-color: #007bff;
--secondary-color: #6c757d;
--background-color: #ffffff;
--border-color: #dee2e6;
--text-color: #212529;
}
`

Development

$3

`bash


Install dependencies

npm install

Start development server

npm run serve

Build for production

npm run build

Run tests

npm test
`

$3

`
src/
├── components/ # UI components
│ ├── canvas.ts # Main canvas component
│ ├── navbar.ts # Top navigation bar
│ ├── sidebar.ts # Sidebar with tools
│ ├── upload-button.ts # File upload component
│ └── ...
├── store/ # State management
├── utils/ # Utility functions
├── i18n/ # Internationalization
└── styles.ts # Global styles
`

$3

The project uses TypeScript and Rollup for building:

`bash


Development build

npm run build

Production build with minification

npm run build:prod

Watch mode for development

npm run build:watch
`

$3

`bash


Run all tests

npm test

Run tests in development mode

npm run test:dev

Run tests in production mode

npm run test:prod

Watch mode for tests

npm run test:watch
`

Browser Support

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

Dependencies

- Lit: Web components framework
- Fabric.js: Canvas manipulation library
- Cropper.js: Image cropping functionality
- TypeScript: Type safety and development experience

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

License

This project is licensed under the BSD-3-Clause License - see the LICENSE file for details.

Support

- 📧 Email: support@creaditor.com
- 🐛 Issues: GitHub Issues
- 📖 Documentation: Full Documentation

Changelog

See CHANGELOG.md for a list of changes and version history.

image-editor