├── LICENSE
├── README.md
├── index.html
└── screenshot.png
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Yani Iliev
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BeforeAfter
2 |
3 | A browser-based tool for comparing and combining before/after images. No server needed, runs entirely in your browser.
4 |
5 | 
6 |
7 | ## Features
8 |
9 | - 📸 Combine before/after images side by side or vertically
10 | - 🔍 Visual diff tool to highlight changes between images
11 | - 📋 Paste images directly from clipboard
12 | - 📥 Drag and drop support
13 | - 🎨 Customizable:
14 | - Background color
15 | - Label size and color
16 | - Gap between images
17 | - Export format and quality
18 | - 💾 Download combined or diff images
19 | - 📱 Mobile-friendly
20 | - 🚀 No installation required
21 |
22 | ## Usage
23 |
24 | 1. Visit [BeforeAfter](https://yani-.github.io/beforeafter/)
25 | 2. Add images using:
26 | - Paste from clipboard (Ctrl+V)
27 | - Drag and drop
28 | - File browser
29 | 3. Customize appearance using the controls
30 | 4. Click "Combine Images" or "Show Diff"
31 | 5. Download the result
32 |
33 | ## Keyboard Shortcuts
34 |
35 | - `Ctrl+V` - Paste image
36 | - `Ctrl+Enter` - Combine images
37 | - `Delete` - Clear selected area
38 |
39 | ## License
40 |
41 | [MIT](LICENSE)
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Before/After Image Combiner
7 |
191 |
192 |
193 |
Before/After Image Combiner
194 |
195 |
196 |
197 |
198 |
199 |
200 | 0px
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 | 20px
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
224 |
225 |
226 |
227 |
228 | 92%
229 |
230 |
231 |
232 |
233 |
234 |
235 |
Before Image
236 |
237 |
238 | Drop image here or
239 | Click and paste image (Ctrl+V)
240 |
241 |
245 |
246 |
247 |
248 |
After Image
249 |
250 |
251 | Drop image here or
252 | Click and paste image (Ctrl+V)
253 |