creaditor-image-editor

v1.0.0

Published

6 months ago

A powerful web-based image editor built with Lit and Fabric.js

0High
0Medium
0Low

adidui

image-editor web-components lit-element typescript lit fabric.js canvas image-processing cropper text-editor

@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

npm install @creaditor/image-editor

Quick Start

<!DOCTYPE html>
<html>
<head>
    <title>Image Editor Demo</title>
</head>
<body>
    <cdtr-image-editor 
        width="800" 
        height="600" 
        lang="en">
    </cdtr-image-editor>

    <script type="module">
        import '@creaditor/image-editor/my-element.js';
    </script>
</body>
</html>

Usage

Basic Usage

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 imageData = event.detail;
    // Handle the saved image data
});

Properties

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

Events

| Event | Detail | Description | |-------|--------|-------------| | save-image | {dataUrl: string, blob: Blob} | 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

Methods

`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.

Styling

The component uses CSS custom properties for theming:

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

Development

Setup

# Install dependencies
npm install

# Start development server
npm run serve

# Build for production
npm run build

# Run tests
npm test

Project Structure

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

Building

The project uses TypeScript and Rollup for building:

# Development build
npm run build

# Production build with minification
npm run build:prod

# Watch mode for development
npm run build:watch

Testing

# 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

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

License

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme