https://github.com/fluid-design-io/image-converter
Image Converter powered by Electron, React, and Sharp
https://github.com/fluid-design-io/image-converter
converter electron image image-converter react sharp typescript
Last synced: 3 months ago
JSON representation
Image Converter powered by Electron, React, and Sharp
- Host: GitHub
- URL: https://github.com/fluid-design-io/image-converter
- Owner: fluid-design-io
- Created: 2024-04-12T05:33:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-13T17:40:39.000Z (9 months ago)
- Last Synced: 2025-04-06T05:48:03.568Z (6 months ago)
- Topics: converter, electron, image, image-converter, react, sharp, typescript
- Language: TypeScript
- Homepage:
- Size: 3.98 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sharp Image Tools
A collection of modern image processing tools built with TypeScript and Sharp.
This repository contains two main tools:
1. **Sharp File Converter** - A desktop application for batch image processing
2. **Dynamic Image Processor** - A VS Code extension for automated image optimization
## Sharp File Converter
A cross-platform desktop application for batch image processing and conversion built with Electron, React, and Sharp.
### Features
- 🖼️ Batch image processing and conversion
- 📐 Flexible image resizing options (width/height, long edge, short edge, percentage)
- 🎨 Support for multiple image formats (PNG, JPEG, WebP, AVIF)
- 💾 Customizable export settings
- 📋 Preset management for quick access to common settings
- 🌓 Dark mode support
- 🖥️ Native desktop experience with modern UI
## Dynamic Image Processor (VS Code Extension)
A VS Code extension that automates image optimization and dimension detection for web development workflows.
### Features
- 🔄 Automatic conversion to AVIF format
- 📏 Automatic image dimension detection and insertion
- ⚙️ Configurable path prefixes for light/dark modes
- 🎯 Smart snippet insertion with accurate dimensions
- 🗑️ Optional original file cleanup
### VS Code Extension Settings
```json
{
"dynamicImage.defaultPathPrefixLight": "/images/light",
"dynamicImage.defaultPathPrefixDark": "/images/dark",
"dynamicImage.defaultImageExtension": "avif"
}
```
## Installation
### Desktop App
```bash
# Clone the repository
git clone https://github.com/fluid-design-io/image-converters.git
# Navigate to project directory
cd sharp-image-tools
# Install dependencies
npm install
```
### VS Code Extension
1. Open VS Code
2. Press `Ctrl+Shift+X` or `Cmd+Shift+X`
3. Search for "Dynamic Image Processor"
4. Click Install
## Tech Stack
- **Core**: TypeScript, Sharp
- **Desktop App**:
- Electron + React
- Tailwind CSS + Radix UI
- React Hook Form + Zod
- Framer Motion
- **VS Code Extension**:
- VS Code Extension API
- Sharp for image processing
## Project Structure
```
├── apps/
│ ├── desktop/src/ # Sharp File Converter
│ │ ├── main/ # Electron main process
│ │ └── renderer/ # React renderer
│ └── vscode/ # Dynamic Image Processor extension
```
## Features in Detail
### Desktop App
- Advanced image processing options
- Preset management
- Batch processing
- Preview thumbnails
- Drag-and-drop interface
### VS Code Extension
- Automatic AVIF conversion
- Image dimension detection
- Custom path configuration
- Smart code snippet insertion
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## Support
[GitHub Issues](https://github.com/fluid-design-io/image-converters/issues)
## License
Both projects are licensed under the MIT License - see the [LICENSE](LICENSE) file for details.