✨ Main Features Overview

🔄 Logic Flowchart

🎛️ Control Panel Details

1. Preset Configuration Management

• Select Preset - Select saved layout configuration from dropdown
• Save Preset - Enter name to save current layout as preset
• Import/Export - Import presets shared by others or export your own presets
• Clear Preset - Cancel current selected preset

2. Copy Settings

• Instance Count - Set number of image copies to generate (1-20)
• Generate Button - Duplicate selected images in editor
• Generate after upload - Automatically generate instances after uploading image according to settings

3. Global Settings

• Horizontal Spacing (X) - Control horizontal distance between instances
• Vertical Spacing (Y) - Control vertical distance between instances
• Opacity - Adjust transparency level of all instances
• Scale - Uniformly adjust size of all instances

4. Output Image Settings

• Width - Set width of final output image
• Height - Set height of final output image
• Edge Margin - Blank area around image edges
• Image Quality - Output image quality percentage
• Aspect Ratio - Common aspect ratio presets (1:1, 4:3, 16:9, etc.)

5. Background Removal Settings

• Remove White Background - Automatically identify and remove white background
• Crop Blank Areas - Automatically crop transparent areas around image
• White Threshold - Adjust sensitivity for identifying white color

6. Instance List

• Display information of all instances: number, position, layer, etc.
• Click list item to select corresponding instance
• Click × button to delete corresponding instance
• Hold Ctrl key to multi-select list items

🎨 Editor Operation Guide

1. Basic Operations

• Move Instance - Click and drag image subject
• Rotate Instance - Drag red rotation handle above instance
• Scale Instance - Drag green scale handles at four corners, or use mouse wheel
• Select Multiple Instances - Hold Ctrl key to click, or drag to select

2. Editor Toolbar

• Align Operations - Left align, right align, top align, bottom align, horizontal center, vertical center, full center
• Distribute Operations - Horizontal distribute evenly, vertical distribute evenly
• Layer Operations - Bring to front, bring forward, send backward, send to back
• Selected Spacing - Adjust horizontal and vertical spacing between selected instances
• Selected Settings - Adjust rotation angle and scale of selected instances

3. Context Menu Functions

Right-click on instance to open context menu, provides:

• Layer adjustments (bring to front, forward, backward, send to back)
• Copy/paste instances
• Various alignment methods
• Horizontal/vertical distribution

4. Bottom Fixed Buttons

• Reset Positions - Rearrange all instances according to current settings
• Clear All - Delete all instances, restore initial state
• Download - Export current editor content as image

🔧 Advanced Tips

📚 Preset Management System

What is a Preset?

Preset is a file that saves complete layout configuration, including:

• Instance count, positions, rotation angles, scale
• Global settings (spacing, opacity, scale, etc.)
• Output settings (size, quality, etc.)
• Background removal settings

Preset Workflow

1. Create or adjust a satisfactory layout
2. Click "Save" button, enter preset name
3. Preset automatically saved to local browser storage
4. Next time, directly select this preset from dropdown
5. Uploading new images automatically applies preset layout

Preset Management Features

• Save Preset - Save current layout as new preset
• Select Preset - Apply saved preset to current image
• Rename Preset - Modify preset name
• Delete Preset - Remove unwanted preset
• Export Preset - Save preset as JSON file to share with others
• Import Preset - Load preset files shared by others

⌨️ Keyboard Shortcuts

General Operations

Copy/Paste

Layer Adjustments

Mouse Operations

• Left drag - Move instance or select multiple by dragging
• Right click - Open instance context menu
• Mouse wheel - Scale selected instance (scroll over instance)
• Ctrl + Left click - Multi-select/deselect instances
• Drag rotation handle - Rotate instance
• Drag corner handle - Scale instance

🔄 Operation Tips