🎯 Focus Blur

A powerful, browser-based image editing tool for selective blurring

Highlight what matters by keeping your subject sharp while blurring the background

---

Features • Demo • Installation • Usage • Keyboard Shortcuts • Contributing

---

✨ Features

🎨 Selection Tools

• Circle Selection - Create perfect circular focus areas
• Rectangle Selection - Draw rectangular regions to keep sharp
• Free Draw Selection - Freehand drawing for complex shapes

🖌️ Drawing Tools

• Brush Tool - Paint directly on your image with customizable size and color
• Text Tool - Add text overlays with adjustable size and color

🔧 Core Functionality

• Move/Select Tool - Reposition and adjust your selections
• Adjustable Blur - Fine-tune blur intensity from 0-20px
• Real-time Preview - Toggle preview on/off to see changes instantly
• Zoom Controls - Zoom in/out and fit image to screen

📤 Export Options

• Download - Save your edited image to your device
• Copy to Clipboard - Instantly copy the result (Ctrl+C)

🎯 User Experience

• Drag & Drop - Simply drop an image onto the canvas
• Paste Support - Paste images directly from clipboard (Ctrl+V)
• Dark Theme - Modern, eye-friendly dark interface
• Responsive Design - Works on any screen size

---

📸 Demo

Main Interface

The clean, modern interface with horizontal toolbar

Selection Tools in Action

Using the circle selection tool to create a focus area

Blur Effect Result

Final result with background blur applied

---

🚀 Installation

Option 1: Direct Use

Simply open index.html in any modern browser. No build process or dependencies required!

# Clone the repository
git clone https://github.com/TryOmar/Focus-Blur.git

# Navigate to the project directory
cd Focus-Blur

# Open in browser
start index.html  # Windows
open index.html   # macOS
xdg-open index.html  # Linux

Option 2: Live Server

For development, use VS Code's Live Server extension or any local server:

# Using Python
python -m http.server 8000

# Using Node.js (npx)
npx serve .

# Using PHP
php -S localhost:8000

---

📖 Usage

1. Upload an Image

   • Click the Upload button, or
   • Drag and drop an image onto the canvas, or
   • Paste from clipboard (Ctrl+V)

2. Select a Tool

   • Choose a selection tool (Circle, Rectangle, or Free Draw)
   • Draw on the image to mark the areas you want to keep sharp

3. Adjust Blur

   • Use the blur slider to set the blur intensity (0-20px)

4. Preview & Export

   • Toggle the Preview switch to see the final result
   • Click Download or Copy to export your image

---

⌨️ Keyboard Shortcuts

Shortcut	Action
V	Move/Select Tool
C	Circle Selection
R	Rectangle Selection
F	Free Draw Selection
B	Brush Tool
T	Text Tool
P	Toggle Preview
Ctrl+V	Paste Image
Ctrl+C	Copy to Clipboard
+ / -	Zoom In/Out

---

🏗️ Project Structure

Focus Blur/
├── index.html              # Main HTML file
├── favicon.svg             # App icon
├── README.md               # This file
├── screenshots/            # Screenshots for documentation
├── css/
│   ├── index.css           # Base styles and design system
│   ├── toolbar.css         # Toolbar styling
│   ├── canvas.css          # Canvas area styling
│   └── controls.css        # Control elements styling
└── js/
    ├── app.js              # Main application logic
    ├── core/
    │   ├── ImageHandler.js     # Image loading and processing
    │   ├── SelectionManager.js # Selection state management
    │   └── BlurProcessor.js    # Blur effect processing
    ├── tools/
    │   ├── CircleTool.js       # Circle selection tool
    │   ├── RectangleTool.js    # Rectangle selection tool
    │   ├── FreeDrawTool.js     # Free draw selection tool
    │   ├── BrushTool.js        # Brush drawing tool
    │   └── TextTool.js         # Text overlay tool
    └── utils/
        └── CanvasUtils.js      # Canvas utility functions

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a 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

If you find this tool useful, consider supporting development:

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Built with vanilla JavaScript, HTML5 Canvas, and CSS3
• Icons designed with SVG
• Typography powered by Inter font family

---

Made with ❤️ by TryOmar

Star ⭐ this repository if you found it helpful!