Background Remover - Clipping Magic Processor

A web-based image processing application that automatically removes backgrounds from images using the Clipping Magic API. Upload multiple images and get both PNG and TIFF outputs with transparent backgrounds.

Features

• Batch Processing: Upload and process multiple images simultaneously
• Dual Output Formats:
  • PNG with transparent background for web use
  • TIFF with clipping path for print workflows
• Authentication: Microsoft Azure AD integration for secure access
• Automatic Cleanup: Files are automatically deleted after 24 hours
• Progress Tracking: Real-time processing status and preview updates
• Bulk Downloads: Download all processed files at once

Requirements

• PHP 7.4 or higher
• Web server (Apache/Nginx)
• cURL extension enabled
• Clipping Magic API account and key
• Microsoft Azure AD app registration (for authentication)

Installation

1. Clone or download the project files to your web server directory
2. Ensure the web server has write permissions for these directories:
   • uploads/
   • processed/
   • temp/
   • logs/
3. Configure your API key and authentication settings (see Configuration section)

Configuration

1. Clipping Magic API

Edit config.php to set your Clipping Magic API key:

'api' => [
    'key' => 'YOUR_BASE64_ENCODED_API_KEY',
    // ...
]

To get your API key:

1. Sign up at Clipping Magic
2. Encode your credentials as base64: echo -n "your_id:your_secret" | base64
3. Replace the key in config.php

2. Microsoft Authentication

Update the authentication settings in index.php (lines 614-624):

const msalConfig = {
    auth: {
        clientId: "YOUR_AZURE_APP_CLIENT_ID",
        authority: "https://login.microsoftonline.com/YOUR_TENANT_ID",
        redirectUri: "https://your-domain.com/path-to-app"
    },
    // ...
};

3. File Processing Settings

Modify config.php to adjust file processing limits:

'processing' => [
    'allowed_types' => ['image/jpeg', 'image/png', 'image/tiff'],
    'max_file_size' => 10 * 1024 * 1024, // 10MB
    // ...
]

Usage

1. Access the Application: Navigate to the application URL in your web browser
2. Authenticate: Log in using your Microsoft account
3. Upload Images: Click "Upload Images" and select one or more image files
4. Processing: Watch the real-time progress as images are processed
5. Download Results:
   • Download individual files using the PNG/TIFF buttons
   • Use "Download All PNGs" or "Download All TIFFs" for bulk downloads

File Structure

background-remover/
├── index.php              # Main application file
├── config.php             # Configuration settings
├── clipping_magic.svg     # Application logo
├── favicon.ico           # Website favicon
├── uploads/              # Temporary upload directory
├── processed/            # Processed images output
├── temp/                 # Temporary processing files
└── logs/                # Application logs

API Integration

The application integrates with the Clipping Magic API to process images:

• Endpoint: https://clippingmagic.com/api/v1/images
• Formats:
  • result - PNG with transparent background
  • clipping_path_tiff - TIFF with embedded clipping path

Security Features

• Authentication: Microsoft Azure AD integration
• File Validation: Checks file types and sizes
• Automatic Cleanup: Files deleted after 24 hours
• Secure API Calls: Uses proper authentication headers
• Error Logging: Comprehensive logging system

Troubleshooting

Common Issues

1. Upload Fails: Check file size limits and allowed file types in config.php
2. API Errors: Verify your Clipping Magic API key is correct and active
3. Authentication Issues: Check Azure AD configuration and redirect URIs
4. Permission Errors: Ensure web server has write access to upload directories

Logs

Check the logs/ directory for detailed error information. Logs are created daily with format: YYYY-MM-DD.log

Development

The application uses:

• Backend: PHP with cURL for API communication
• Frontend: Vanilla JavaScript with modern ES6+ features
• Styling: CSS Grid and Flexbox for responsive design
• Authentication: Microsoft MSAL.js library

File Processing Flow

1. File uploaded via web interface
2. Server validates file type and size
3. File saved with unique ID prefix
4. API calls made to Clipping Magic for both PNG and TIFF formats
5. Processed files saved to processed/ directory
6. Client updated with download links and preview

License

This project is provided as-is for internal use. Clipping Magic API usage subject to their terms of service.

Support

For issues with:

• Clipping Magic API: Contact Clipping Magic support
• Microsoft Authentication: Check Azure AD documentation
• Application Issues: Check logs and verify configuration settings