Spis treści
Mały gadżet na stronę.

OPIS APLIKACJI:
Edytor Zdjęć to zaawansowane narzędzie do edycji obrazów online, które umożliwia szybką i profesjonalną obróbkę fotografii bez potrzeby instalowania dodatkowego oprogramowania. Aplikacja oferuje intuicyjny interfejs oraz bogaty zestaw funkcji edycyjnych, dzięki czemu użytkownicy mogą w łatwy sposób poprawiać i modyfikować swoje zdjęcia bezpośrednio w przeglądarce.
Zapraszam do testu 😀
Edytor zdjęć online

Zdjęcie jest automatycznie skalowane, aby całe mieściło się w obszarze podglądu
Filtry
Jasność
100%
Obrót i Odbicie
Powiększenie
100%
Kadrowanie
Jak obsługiwać aplikację:

1. Wybierz zdjęcie – Kliknij przycisk „Wybierz zdjęcie”
2. Zastosuj filtry – Dostosuj jasność, nasycenie i inne parametry
3. Obróć lub odbij – Skorzystaj z narzędzi obrotu i odbicia
4. Przytnij obraz – Użyj narzędzia kadrowania do precyzyjnego przycięcia
5. Zapisz zmiany – Pobierz gotowe zdjęcie na swój komputer
Edytor zdjęć to kompletne narzędzie dla każdego, kto potrzebuje szybkiej i skutecznej edycji obrazów bez skomplikowanych programów graficznych.
Kluczowe funkcje i narzędzia:

Podstawowe Narzędzia Edycji:

- Filtry Obrazu: Jasność, nasycenie kolorów, odwrotność kolorów, skala szarości
- Obrót i Odbicie: Obrót w lewo/prawo, odbicie poziome i pionowe
- Precyzyjne Kadrowanie: Zaawansowane narzędzie do przycinania zdjęć z możliwością regulacji rozmiaru i pozycji
- Edycja w Czasie Rzeczywistym: Natychmiastowy podgląd zmian
Zaawansowane Funkcje:

- Suwakowe Regulacje: Precyzyjna kontrola parametrów obrazu
- Zachowanie Jakości: Eksport obrazów w wysokiej rozdzielczości
- Obsługa Różnych Formatów: Wczytywanie popularnych formatów graficznych
- Responsywny Interfejs: Dostosowanie do różnych rozmiarów ekranu
Zastosowanie:

- Poprawa zdjęć produktowych dla sklepów internetowych
- Edycja zdjęć do mediów społecznościowych
- Przygotowanie obrazów do blogów i stron internetowych
- Kreatywna obróbka fotografii hobbystycznych
- Szybkie poprawki zdjęć przed publikacją
Jak wstawić edytor online na własną stronę?

Tworzymy nowy dokument index.html. I wklejamy poniższy kod źródłowy.
Lub pobrać gotowy plik w formacie zip
index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edytor Zdjęć Online - Darmowe Narzędzie do Edycji Obrazów</title>
    <meta name="autor" content="skrip.pl">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        .photo-editor-container {
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .app-container {
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .app-container.disable .editor-panel,
        .app-container.disable .controls .reset-filter,
        .app-container.disable .controls .save-img {
            opacity: 0.5;
            pointer-events: none;
        }
        
        .app-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 25px;
            font-size: 1.8rem;
            color: #333;
        }
        
        .wrapper {
            display: flex;
            flex-direction: column;
            margin: 20px 0;
            min-height: 500px;
            gap: 20px;
        }
        
        .preview-img {
            flex-grow: 1;
            display: flex;
            overflow: hidden;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: 450px;
            max-height: 70vh;
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
        }
        
        .preview-img img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
            object-fit: contain;
        }
        
        .editor-panel {
            padding: 20px;
            width: 100%;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        
        .panel-section {
            flex: 1;
            min-width: 200px;
            padding: 10px;
        }
        
        .panel-section .title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 500;
            white-space: nowrap;
            color: #495057;
        }
        
        .panel-section .options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .panel-section button {
            outline: none;
            height: 42px;
            font-size: 14px;
            border-radius: 6px;
            border: 1px solid;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 12px;
            flex: 1;
            min-width: 100px;
            background: white;
        }
        
        .panel-section button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .filter button {
            border-color: #6f42c1;
            color: #6f42c1;
        }
        
        .filter button:hover {
            background: #6f42c1;
            color: white;
        }
        
        .filter button.active {
            border-color: #6f42c1;
            background: #6f42c1;
            color: white;
        }
        
        .rotate button {
            border-color: #20c997;
            color: #20c997;
        }
        
        .rotate button:hover {
            background: #20c997;
            color: white;
        }
        
        .crop button {
            border-color: #fd7e14;
            color: #fd7e14;
        }
        
        .crop button:hover {
            background: #fd7e14;
            color: white;
        }
        
        .zoom button {
            border-color: #e83e8c;
            color: #e83e8c;
        }
        
        .zoom button:hover {
            background: #e83e8c;
            color: white;
        }
        
        .filter .slider,
        .zoom .slider {
            margin-top: 15px;
            width: 100%;
        }
        
        .filter .slider .filter-info,
        .zoom .slider .filter-info {
            display: flex;
            font-size: 14px;
            justify-content: space-between;
            margin-bottom: 5px;
            color: #495057;
        }
        
        .filter .slider input,
        .zoom .slider input {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            outline: none;
        }
        
        .filter .slider input {
            background: #6f42c1;
        }
        
        .zoom .slider input {
            background: #e83e8c;
        }
        
        .rotate .options button,
        .crop .options button,
        .zoom .options button {
            flex: 0 0 calc(50% - 4px);
        }
        
        .crop-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            cursor: move;
            display: none;
            z-index: 10;
        }
        
        .crop-box {
            position: absolute;
            border: 2px solid #fd7e14;
            display: none;
            z-index: 20;
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
            cursor: move;
        }
        
        .crop-handle {
            position: absolute;
            width: 12px;
            height: 12px;
            border: 2px solid #fd7e14;
            border-radius: 50%;
            z-index: 30;
            background: white;
        }
        
        .crop-handle.nw { top: -6px; left: -6px; cursor: nw-resize; }
        .crop-handle.ne { top: -6px; right: -6px; cursor: ne-resize; }
        .crop-handle.sw { bottom: -6px; left: -6px; cursor: sw-resize; }
        .crop-handle.se { bottom: -6px; right: -6px; cursor: se-resize; }
        .crop-handle.n { top: -6px; left: 50%; margin-left: -6px; cursor: n-resize; }
        .crop-handle.s { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
        .crop-handle.e { top: 50%; right: -6px; margin-top: -6px; cursor: e-resize; }
        .crop-handle.w { top: 50%; left: -6px; margin-top: -6px; cursor: w-resize; }
        
        .controls {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .controls button {
            padding: 12px 24px;
            font-size: 14px;
            border-radius: 6px;
            outline: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            border: 1px solid;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }
        
        .controls .row {
            display: flex;
            gap: 10px;
        }
        
        .reset-filter {
            background: #6c757d;
            border-color: #6c757d;
            color: white;
        }
        
        .reset-filter:hover {
            background: #5a6268;
            border-color: #545b62;
            transform: translateY(-2px);
        }
        
        .choose-img {
            background: #28a745;
            border-color: #28a745;
            color: white;
        }
        
        .choose-img:hover {
            background: #218838;
            border-color: #1e7e34;
            transform: translateY(-2px);
        }
        
        .save-img {
            background: #007bff;
            border-color: #007bff;
            color: white;
        }
        
        .save-img:hover {
            background: #0069d9;
            border-color: #0062cc;
            transform: translateY(-2px);
        }
        
        .crop-controls {
            display: none;
            margin-top: 10px;
            width: 100%;
            justify-content: space-between;
            gap: 10px;
        }
        
        .crop-controls button {
            width: calc(50% - 5px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        #apply-crop {
            background: #28a745;
            border-color: #28a745;
            color: white;
        }
        
        #apply-crop:hover {
            background: #218838;
            border-color: #1e7e34;
        }
        
        #cancel-crop {
            background: #dc3545;
            border-color: #dc3545;
            color: white;
        }
        
        #cancel-crop:hover {
            background: #c82333;
            border-color: #bd2130;
        }
        
        .icon {
            width: 18px;
            height: 18px;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            font-size: 0.8rem;
        }
        
        .image-info {
            text-align: center;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #6c757d;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @media screen and (max-width: 1100px) {
            .container {
                padding: 15px;
            }
            
            .wrapper .editor-panel {
                flex-direction: column;
                gap: 15px;
            }
            
            .panel-section {
                min-width: 100%;
            }
        }
        
        @media screen and (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .wrapper .preview-img {
                min-height: 350px;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .controls .row {
                width: 100%;
                justify-content: space-between;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
        
        @media screen and (max-width: 500px) {
            .container {
                padding: 10px;
            }
            
            .panel-section {
                padding: 5px;
            }
            
            .panel-section button {
                font-size: 13px;
                height: 38px;
                gap: 5px;
                padding: 0 8px;
                min-width: 80px;
            }
            
            .controls button {
                padding: 10px 15px;
                font-size: 13px;
                width: 100%;
                justify-content: center;
            }
            
            .controls .row {
                flex-direction: column;
            }
            
            .feature {
                font-size: 0.9rem;
                padding: 8px 15px;
            }
        }
    </style>
</head>

<div class="photo-editor-container">
    <div class="container">
        
        <div class="app-container disable">
            <div class="app-title">
                <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M5,19V5h14v14H5z"/>
                    <path d="M17.5,11.5c0,1.38-1.12,2.5-2.5,2.5s-2.5-1.12-2.5-2.5S13.62,9,15,9S17.5,10.12,17.5,11.5z M8.5,11.5c0,1.38-1.12,2.5-2.5,2.5 s-2.5-1.12-2.5-2.5S4.62,9,6,9S8.5,10.12,8.5,11.5z M15,19l-6-7.5L15,19z"/>
                </svg>
                <span>Edytor Zdjęć</span>
            </div>
            
            <div class="wrapper">
                <div class="preview-img"> 
                    <div class="loading-overlay">
                        <div class="loading-spinner"></div>
                    </div>
                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjY2NjY2NjIi8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzk2OTY5NiIgZHk9Ii4zZW0iPld5YmllcnogemRqxYTCo3RpZTwvdGV4dD4KPC9zdmc+" alt="preview-img">
                    <div class="crop-overlay"></div>
                    <div class="crop-box">
                        <div class="crop-handle nw"></div>
                        <div class="crop-handle ne"></div>
                        <div class="crop-handle sw"></div>
                        <div class="crop-handle se"></div>
                        <div class="crop-handle n"></div>
                        <div class="crop-handle s"></div>
                        <div class="crop-handle e"></div>
                        <div class="crop-handle w"></div>
                    </div>
                </div>
                
                <div class="image-info">
                    <p>Zdjęcie jest automatycznie skalowane, aby całe mieściło się w obszarze podglądu</p>
                </div>
                
                <div class="editor-panel">
                    <div class="panel-section filter">
                        <label class="title">
                            <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
                            </svg>
                            Filtry
                        </label>
                        <div class="options">
                            <button id="brightness" class="active">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
                                </svg>
                                Jasność
                            </button>
                            <button id="saturation">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M15,12c0,1.66-1.34,3-3,3s-3-1.34-3-3s1.34-3,3-3S15,10.34,15,12z"/>
                                </svg>
                                Nasycenie
                            </button>
                            <button id="inversion">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M12,4.5C7,4.5,2.73,7.61,1,12c1.73,4.39,6,7.5,11,7.5s9.27-3.11,11-7.5C21.27,7.61,17,4.5,12,4.5z M12,17c-2.76,0-5-2.24-5-5 s2.24-5,5-5s5,2.24,5,5S14.76,17,12,17z M12,9c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S13.66,9,12,9z"/>
                                </svg>
                                Odwrotność
                            </button>
                            <button id="grayscale">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M15,12c0,1.66-1.34,3-3,3s-3-1.34-3-3s1.34-3,3-3S15,10.34,15,12z"/>
                                    <circle cx="8.5" cy="10.5" r="1.5"/>
                                    <circle cx="15.5" cy="10.5" r="1.5"/>
                                    <path d="M12,17.5c2.33,0,4.31-1.46,5.11-3.5H6.89C7.69,16.04,9.67,17.5,12,17.5z"/>
                                </svg>
                                Skala Szarości
                            </button>
                        </div>
                        <div class="slider">
                            <div class="filter-info">
                                <p class="name">Jasność</p>
                                <p class="value">100%</p>
                            </div>
                            <input type="range" value="100" min="0" max="200">
                        </div>
                    </div>
                    
                    <div class="panel-section rotate">
                        <label class="title">
                            <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
                            </svg>
                            Obrót i Odbicie
                        </label>
                        <div class="options">
                            <button id="left">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
                                </svg>
                            </button>
                            <button id="right">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43-5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
                                </svg>
                            </button>
                            <button id="horizontal">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M15,21h2v-2h-2V21z M19,9h2V7h-2V9z M3,5v14c0,1.1,0.9,2,2,2h4v-2H5V5h4V3H5C3.9,3,3,3.9,3,5z M19,3v2h2C21,3.9,20.1,3,19,3 z M11,23h2v-2h-2V23z M15,5h2V3h-2V5z M7,5h2V3H7V5z M19,17h2v-2h-2V17z M15,13h2v-2h-2V13z M19,13h2v-2h-2V13z M11,9h2V7h-2V9z M19,21c1.1,0,2-0.9,2-2h-2V21z M11,17h2v-2h-2V17z M11,5h2V3h-2V5z"/>
                                </svg>
                            </button>
                            <button id="vertical">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M12,7l5,5h-3v4h-4v-4H7L12,7z M21,19h-6v2h6c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-6v2h6V19z M3,19V5c0-1.1-0.9-2-2-2h6v2H5v14h6 v2H5C3.9,21,3,20.1,3,19z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    
                    <div class="panel-section zoom">
                        <label class="title">
                            <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                                <path d="M12,7H10v4H8v2h4v-2h-2V7z"/>
                            </svg>
                            Powiększenie
                        </label>
                        <div class="options">
                            <button id="zoom-out">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M19 13H5v-2h14v2z"/>
                                </svg>
                                -
                            </button>
                            <button id="zoom-in">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                                </svg>
                                +
                            </button>
                        </div>
                        <div class="slider">
                            <div class="filter-info">
                                <p class="name">Powiększenie</p>
                                <p class="value">100%</p>
                            </div>
                            <input type="range" value="100" min="10" max="300">
                        </div>
                    </div>
                    
                    <div class="panel-section crop">
                        <label class="title">
                            <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                <path d="M17,15h2V7c0-1.1-0.9-2-2-2H9v2h8V15z M7,17V1H5v4H1v2h4v10c0,1.1,0.9,2,2,2h10v4h2v-4h4v-2H7z"/>
                            </svg>
                            Kadrowanie
                        </label>
                        <div class="options">
                            <button id="crop-btn">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M17,15h2V7c0-1.1-0.9-2-2-2H9v2h8V15z M7,17V1H5v4H1v2h4v10c0,1.1,0.9,2,2,2h10v4h2v-4h4v-2H7z"/>
                                </svg>
                                Rozpocznij
                            </button>
                            <button id="reset-crop">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M17.65,6.35C16.2,4.9,14.21,4,12,4c-4.42,0-7.99,3.58-7.99,8s3.57,8,7.99,8c3.73,0,6.84-2.55,7.73-6h-2.08 c-0.82,2.33-3.04,4-5.65,4-3.31,0-6-2.69-6-6s2.69-6,6-6c1.66,0,3.14,0.69,4.22,1.78L13,11h7V4L17.65,6.35z"/>
                                </svg>
                                Resetuj
                            </button>
                        </div>
                        <div class="crop-controls">
                            <button id="apply-crop">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                                </svg>
                                Zastosuj
                            </button>
                            <button id="cancel-crop">
                                <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                                </svg>
                                Anuluj
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="controls">
                <button class="reset-filter">
                    <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                        <path d="M17.65,6.35C16.2,4.9,14.21,4,12,4c-4.42,0-7.99,3.58-7.99,8s3.57,8,7.99,8c3.73,0,6.84-2.55,7.73-6h-2.08 c-0.82,2.33-3.04,4-5.65,4-3.31,0-6-2.69-6-6s2.69-6,6-6c1.66,0,3.14,0.69,4.22,1.78L13,11h7V4L17.65,6.35z"/>
                    </svg>
                    Cofnij zmiany
                </button>
                <div class="row">
                    <input type="file" class="file-input" accept="image/*" hidden>
                    <button class="choose-img">
                        <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                            <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
                        </svg>
                        Wybierz zdjęcie
                    </button>
                    <button class="save-img">
                        <svg class="icon" viewBox="0 0 24 24" width="18" height="18">
                            <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
                        </svg>
                        Zapisz zmiany
                    </button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>Edytor Zdjęć Online &copy; 2025 <a href="https://skrip.pl/">www.skrip.pl</a></p>
        </footer>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.querySelector(".file-input"),
    filterOptions = document.querySelectorAll(".filter button"),
    filterName = document.querySelector(".filter-info .name"),
    filterValue = document.querySelector(".filter-info .value"),
    filterSlider = document.querySelector(".slider input"),
    rotateOptions = document.querySelectorAll(".rotate button"),
    previewImg = document.querySelector(".preview-img img"),
    resetFilterBtn = document.querySelector(".reset-filter"),
    chooseImgBtn = document.querySelector(".choose-img"),
    saveImgBtn = document.querySelector(".save-img"),
    cropBtn = document.getElementById("crop-btn"),
    resetCropBtn = document.getElementById("reset-crop"),
    applyCropBtn = document.getElementById("apply-crop"),
    cancelCropBtn = document.getElementById("cancel-crop"),
    cropOverlay = document.querySelector(".crop-overlay"),
    cropBox = document.querySelector(".crop-box"),
    cropHandles = document.querySelectorAll(".crop-handle"),
    cropControls = document.querySelector(".crop-controls"),
    zoomOutBtn = document.getElementById("zoom-out"),
    zoomInBtn = document.getElementById("zoom-in"),
    zoomSlider = document.querySelector(".zoom .slider input"),
    zoomValueDisplay = document.querySelector(".zoom .value"),
    loadingOverlay = document.querySelector(".loading-overlay");

    let brightness = "100", saturation = "100", inversion = "0", grayscale = "0";
    let rotate = 0, flipHorizontal = 1, flipVertical = 1;
    let isCropping = false;
    let isDragging = false;
    let isResizing = false;
    let activeHandle = null;
    let startX, startY, startWidth, startHeight, startLeft, startTop;
    
    let originalImageFile = null;
    let originalImageURL = null;
    let currentImageURL = null;
    
    let zoomLevel = 1;
    let minZoom = 0.1;
    let maxZoom = 3;
    let zoomStep = 0.1;

    // POPRAWIONA FUNKCJA ŁADOWANIA OBRAZU
    const loadImage = () => {
        return new Promise((resolve, reject) => {
            const file = fileInput.files[0];
            if (!file) {
                reject("Nie wybrano pliku");
                return;
            }

            if (!file.type.match('image.*')) {
                alert('Proszę wybrać plik obrazu (JPEG, PNG, GIF, itp.)');
                reject("Nieprawidłowy typ pliku");
                return;
            }

            // Pokaż loader
            loadingOverlay.style.display = 'flex';
            
            originalImageFile = file;
            
            if (originalImageURL) {
                URL.revokeObjectURL(originalImageURL);
            }
            
            originalImageURL = URL.createObjectURL(file);
            currentImageURL = originalImageURL;

            const img = new Image();
            img.onload = function() {
                previewImg.src = originalImageURL;
                previewImg.onload = function() {
                    document.querySelector(".app-container").classList.remove("disable");
                    loadingOverlay.style.display = 'none';
                    resetFilter();
                    resolve();
                };
            };
            img.onerror = function() {
                loadingOverlay.style.display = 'none';
                alert("Wystąpił błąd podczas ładowania obrazu");
                reject("Błąd ładowania obrazu");
            };
            img.src = originalImageURL;
        });
    }

    // POPRAWIONA FUNKCJA AUTOMATYCZNEGO SKALOWANIA
    const applyAutoScaling = () => {
        if (!previewImg.complete || previewImg.naturalWidth === 0) {
            setTimeout(applyAutoScaling, 100);
            return;
        }
        
        // Resetujemy styl obrazu
        previewImg.style.transform = '';
        previewImg.style.width = '';
        previewImg.style.height = '';
        previewImg.style.margin = 'auto';
        previewImg.style.display = 'block';
        
        // Pobieramy wymiary kontenera
        const container = document.querySelector('.preview-img');
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        
        // Obliczamy współczynniki skalowania
        const widthRatio = containerWidth / previewImg.naturalWidth;
        const heightRatio = containerHeight / previewImg.naturalHeight;
        
        // Wybieramy mniejszy współczynnik, aby całe zdjęcie mieściło się w kontenerze
        const scale = Math.min(widthRatio, heightRatio, 1);
        
        // Obliczamy nowe wymiary
        const newWidth = previewImg.naturalWidth * scale;
        const newHeight = previewImg.naturalHeight * scale;
        
        // Ustawiamy nowe wymiary
        previewImg.style.width = newWidth + 'px';
        previewImg.style.height = newHeight + 'px';
        
        // Resetujemy transform origin
        previewImg.style.transformOrigin = 'center center';
        
        // Ustawiamy object-fit na contain dla bezpieczeństwa
        previewImg.style.objectFit = 'contain';
    }

    const applyFilter = () => {
        if (!previewImg.complete) return;
        
        previewImg.style.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
        previewImg.style.transform = `rotate(${rotate}deg) scale(${flipHorizontal}, ${flipVertical}) scale(${zoomLevel})`;
    }

    // FUNKCJE DO POWIĘKSZANIA
    const updateZoom = () => {
        zoomValueDisplay.innerText = `${Math.round(zoomLevel * 100)}%`;
        zoomSlider.value = zoomLevel * 100;
        applyFilter();
    }

    const zoomIn = () => {
        if (zoomLevel < maxZoom) {
            zoomLevel = Math.min(maxZoom, zoomLevel + zoomStep);
            updateZoom();
        }
    }

    const zoomOut = () => {
        if (zoomLevel > minZoom) {
            zoomLevel = Math.max(minZoom, zoomLevel - zoomStep);
            updateZoom();
        }
    }

    const resetZoom = () => {
        zoomLevel = 1;
        updateZoom();
    }

    const handleZoomSlider = () => {
        zoomLevel = parseFloat(zoomSlider.value) / 100;
        updateZoom();
    }

    filterOptions.forEach(option => {
        option.addEventListener("click", () => {
            document.querySelector(".filter .active").classList.remove("active");
            option.classList.add("active");
            filterName.innerText = option.innerText;

            if(option.id === "brightness") {
                filterSlider.max = "200";
                filterSlider.value = brightness;
                filterValue.innerText = `${brightness}%`;
            } else if(option.id === "saturation") {
                filterSlider.max = "200";
                filterSlider.value = saturation;
                filterValue.innerText = `${saturation}%`
            } else if(option.id === "inversion") {
                filterSlider.max = "100";
                filterSlider.value = inversion;
                filterValue.innerText = `${inversion}%`;
            } else {
                filterSlider.max = "100";
                filterSlider.value = grayscale;
                filterValue.innerText = `${grayscale}%`;
            }
        });
    });

    const updateFilter = () => {
        filterValue.innerText = `${filterSlider.value}%`;
        const selectedFilter = document.querySelector(".filter .active");

        if(selectedFilter.id === "brightness") {
            brightness = filterSlider.value;
        } else if(selectedFilter.id === "saturation") {
            saturation = filterSlider.value;
        } else if(selectedFilter.id === "inversion") {
            inversion = filterSlider.value;
        } else {
            grayscale = filterSlider.value;
        }
        applyFilter();
    }

    rotateOptions.forEach(option => {
        option.addEventListener("click", () => {
            if(option.id === "left") {
                rotate -= 90;
            } else if(option.id === "right") {
                rotate += 90;
            } else if(option.id === "horizontal") {
                flipHorizontal = flipHorizontal === 1 ? -1 : 1;
            } else {
                flipVertical = flipVertical === 1 ? -1 : 1;
            }
            applyFilter();
        });
    });

    const resetFilter = async () => {
        if (originalImageURL && currentImageURL !== originalImageURL) {
            if (currentImageURL && currentImageURL !== originalImageURL) {
                URL.revokeObjectURL(currentImageURL);
            }
            currentImageURL = originalImageURL;
            previewImg.src = originalImageURL;
            
            await new Promise((resolve) => {
                previewImg.onload = function() {
                    brightness = "100"; 
                    saturation = "100"; 
                    inversion = "0"; 
                    grayscale = "0";
                    rotate = 0; 
                    flipHorizontal = 1; 
                    flipVertical = 1;
                    
                    filterOptions[0].click();
                    filterSlider.value = "100";
                    resetZoom();
                    applyFilter();
                    resetCrop();
                    applyAutoScaling();
                    resolve();
                };
            });
        } else {
            brightness = "100"; 
            saturation = "100"; 
            inversion = "0"; 
            grayscale = "0";
            rotate = 0; 
            flipHorizontal = 1; 
            flipVertical = 1;
            filterOptions[0].click();
            filterSlider.value = "100";
            resetZoom();
            applyFilter();
            resetCrop();
            applyAutoScaling();
        }
    }

    const startCrop = () => {
        if (!previewImg.complete) {
            alert('Obraz nie jest jeszcze załadowany. Poczekaj chwilę.');
            return;
        }
        
        isCropping = true;
        cropOverlay.style.display = 'block';
        cropBox.style.display = 'block';
        cropControls.style.display = 'flex';
        cropBtn.disabled = true;
        
        const imgRect = previewImg.getBoundingClientRect();
        const containerRect = document.querySelector('.preview-img').getBoundingClientRect();
        
        const width = Math.min(imgRect.width * 0.7, containerRect.width * 0.8);
        const height = Math.min(imgRect.height * 0.7, containerRect.height * 0.8);
        const left = (containerRect.width - width) / 2;
        const top = (containerRect.height - height) / 2;
        
        cropBox.style.width = width + 'px';
        cropBox.style.height = height + 'px';
        cropBox.style.left = left + 'px';
        cropBox.style.top = top + 'px';
    }

    const resetCrop = () => {
        isCropping = false;
        cropOverlay.style.display = 'none';
        cropBox.style.display = 'none';
        cropControls.style.display = 'none';
        cropBtn.disabled = false;
    }

    const applyCrop = async () => {
        if (!isCropping) {
            alert('Najpierw rozpocznij kadrowanie!');
            return;
        }

        if (!previewImg.complete) {
            alert('Obraz nie jest jeszcze załadowany. Poczekaj chwilę.');
            return;
        }

        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        const cropRect = cropBox.getBoundingClientRect();
        const imgRect = previewImg.getBoundingClientRect();
        
        const scaleX = previewImg.naturalWidth / previewImg.width;
        const scaleY = previewImg.naturalHeight / previewImg.height;
        
        const x = (cropRect.left - imgRect.left) * scaleX;
        const y = (cropRect.top - imgRect.top) * scaleY;
        const width = cropRect.width * scaleX;
        const height = cropRect.height * scaleY;
        
        const boundedX = Math.max(0, Math.min(x, previewImg.naturalWidth - 1));
        const boundedY = Math.max(0, Math.min(y, previewImg.naturalHeight - 1));
        const boundedWidth = Math.max(1, Math.min(width, previewImg.naturalWidth - boundedX));
        const boundedHeight = Math.max(1, Math.min(height, previewImg.naturalHeight - boundedY));
        
        canvas.width = boundedWidth;
        canvas.height = boundedHeight;
        
        ctx.drawImage(previewImg, boundedX, boundedY, boundedWidth, boundedHeight, 0, 0, boundedWidth, boundedHeight);
        
        const croppedImageURL = canvas.toDataURL('image/jpeg', 0.95);
        
        if (currentImageURL && currentImageURL !== originalImageURL) {
            URL.revokeObjectURL(currentImageURL);
        }
        currentImageURL = croppedImageURL;
        previewImg.src = currentImageURL;
        
        resetCrop();
        
        await new Promise((resolve) => {
            previewImg.onload = function() {
                resetZoom();
                applyAutoScaling();
                applyFilter();
                resolve();
            };
        });
    }

    // Obsługa zdarzeń dla kadrowania
    cropBox.addEventListener('mousedown', startDrag);
    cropOverlay.addEventListener('mousedown', (e) => {
        if (e.target === cropOverlay) {
            resetCrop();
        }
    });

    cropHandles.forEach(handle => {
        handle.addEventListener('mousedown', startResize);
    });

    function startDrag(e) {
        if (!isCropping) return;
        isDragging = true;
        const rect = cropBox.getBoundingClientRect();
        const containerRect = document.querySelector('.preview-img').getBoundingClientRect();
        const imgRect = previewImg.getBoundingClientRect();
        
        startX = e.clientX;
        startY = e.clientY;
        startLeft = rect.left - containerRect.left;
        startTop = rect.top - containerRect.top;
        
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDrag);
        e.preventDefault();
    }

    function drag(e) {
        if (!isDragging) return;
        
        const containerRect = document.querySelector('.preview-img').getBoundingClientRect();
        const imgRect = previewImg.getBoundingClientRect();
        
        let newLeft = startLeft + (e.clientX - startX);
        let newTop = startTop + (e.clientY - startY);
        
        newLeft = Math.max(imgRect.left - containerRect.left, 
                          Math.min(newLeft, 
                                  imgRect.left + imgRect.width - containerRect.left - cropBox.offsetWidth));
        
        newTop = Math.max(imgRect.top - containerRect.top, 
                         Math.min(newTop, 
                                 imgRect.top + imgRect.height - containerRect.top - cropBox.offsetHeight));
        
        cropBox.style.left = newLeft + 'px';
        cropBox.style.top = newTop + 'px';
    }

    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDrag);
    }

    function startResize(e) {
        if (!isCropping) return;
        isResizing = true;
        activeHandle = e.target;
        
        const rect = cropBox.getBoundingClientRect();
        const containerRect = document.querySelector('.preview-img').getBoundingClientRect();
        const imgRect = previewImg.getBoundingClientRect();
        
        startX = e.clientX;
        startY = e.clientY;
        startWidth = rect.width;
        startHeight = rect.height;
        startLeft = rect.left - containerRect.left;
        startTop = rect.top - containerRect.top;
        
        document.addEventListener('mousemove', resize);
        document.addEventListener('mouseup', stopResize);
        e.preventDefault();
        e.stopPropagation();
    }

    function resize(e) {
        if (!isResizing) return;
        
        const containerRect = document.querySelector('.preview-img').getBoundingClientRect();
        const imgRect = previewImg.getBoundingClientRect();
        const minSize = 20;
        
        let newWidth = startWidth;
        let newHeight = startHeight;
        let newLeft = startLeft;
        let newTop = startTop;
        
        const deltaX = e.clientX - startX;
        const deltaY = e.clientY - startY;
        
        if (activeHandle.classList.contains('e')) {
            newWidth = Math.max(minSize, startWidth + deltaX);
            newWidth = Math.min(newWidth, imgRect.left + imgRect.width - containerRect.left - newLeft);
        } else if (activeHandle.classList.contains('w')) {
            newWidth = Math.max(minSize, startWidth - deltaX);
            newLeft = startLeft + deltaX;
            if (newLeft < imgRect.left - containerRect.left) {
                newWidth -= (imgRect.left - containerRect.left - newLeft);
                newLeft = imgRect.left - containerRect.left;
            }
        } else if (activeHandle.classList.contains('s')) {
            newHeight = Math.max(minSize, startHeight + deltaY);
            newHeight = Math.min(newHeight, imgRect.top + imgRect.height - containerRect.top - newTop);
        } else if (activeHandle.classList.contains('n')) {
            newHeight = Math.max(minSize, startHeight - deltaY);
            newTop = startTop + deltaY;
            if (newTop < imgRect.top - containerRect.top) {
                newHeight -= (imgRect.top - containerRect.top - newTop);
                newTop = imgRect.top - containerRect.top;
            }
        } else if (activeHandle.classList.contains('se')) {
            newWidth = Math.max(minSize, startWidth + deltaX);
            newHeight = Math.max(minSize, startHeight + deltaY);
            newWidth = Math.min(newWidth, imgRect.left + imgRect.width - containerRect.left - newLeft);
            newHeight = Math.min(newHeight, imgRect.top + imgRect.height - containerRect.top - newTop);
        } else if (activeHandle.classList.contains('sw')) {
            newWidth = Math.max(minSize, startWidth - deltaX);
            newHeight = Math.max(minSize, startHeight + deltaY);
            newLeft = startLeft + deltaX;
            if (newLeft < imgRect.left - containerRect.left) {
                newWidth -= (imgRect.left - containerRect.left - newLeft);
                newLeft = imgRect.left - containerRect.left;
            }
            newHeight = Math.min(newHeight, imgRect.top + imgRect.height - containerRect.top - newTop);
        } else if (activeHandle.classList.contains('ne')) {
            newWidth = Math.max(minSize, startWidth + deltaX);
            newHeight = Math.max(minSize, startHeight - deltaY);
            newTop = startTop + deltaY;
            newWidth = Math.min(newWidth, imgRect.left + imgRect.width - containerRect.left - newLeft);
            if (newTop < imgRect.top - containerRect.top) {
                newHeight -= (imgRect.top - containerRect.top - newTop);
                newTop = imgRect.top - containerRect.top;
            }
        } else if (activeHandle.classList.contains('nw')) {
            newWidth = Math.max(minSize, startWidth - deltaX);
            newHeight = Math.max(minSize, startHeight - deltaY);
            newLeft = startLeft + deltaX;
            newTop = startTop + deltaY;
            if (newLeft < imgRect.left - containerRect.left) {
                newWidth -= (imgRect.left - containerRect.left - newLeft);
                newLeft = imgRect.left - containerRect.left;
            }
            if (newTop < imgRect.top - containerRect.top) {
                newHeight -= (imgRect.top - containerRect.top - newTop);
                newTop = imgRect.top - containerRect.top;
            }
        }
        
        cropBox.style.width = newWidth + 'px';
        cropBox.style.height = newHeight + 'px';
        cropBox.style.left = newLeft + 'px';
        cropBox.style.top = newTop + 'px';
    }

    function stopResize() {
        isResizing = false;
        activeHandle = null;
        document.removeEventListener('mousemove', resize);
        document.removeEventListener('mouseup', stopResize);
    }

    const saveImage = () => {
        if (!previewImg.complete) {
            alert('Obraz nie jest jeszcze załadowany. Poczekaj chwilę.');
            return;
        }

        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = previewImg.naturalWidth;
        canvas.height = previewImg.naturalHeight;
        
        ctx.filter = `brightness(${brightness}%) saturate(${saturation}%) invert(${inversion}%) grayscale(${grayscale}%)`;
        ctx.translate(canvas.width / 2, canvas.height / 2);
        if(rotate !== 0) {
            ctx.rotate(rotate * Math.PI / 180);
        }
        ctx.scale(flipHorizontal, flipVertical);
        ctx.drawImage(previewImg, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
        
        const link = document.createElement("a");
        link.download = "edycja-zdjecia.jpg";
        link.href = canvas.toDataURL();
        link.click();
    }

    // PRZYPISANIE ZDARZEŃ
    filterSlider.addEventListener("input", updateFilter);
    resetFilterBtn.addEventListener("click", resetFilter);
    saveImgBtn.addEventListener("click", saveImage);
    chooseImgBtn.addEventListener("click", () => fileInput.click());
    cropBtn.addEventListener("click", startCrop);
    resetCropBtn.addEventListener("click", resetCrop);
    applyCropBtn.addEventListener("click", applyCrop);
    cancelCropBtn.addEventListener("click", resetCrop);
    
    zoomOutBtn.addEventListener("click", zoomOut);
    zoomInBtn.addEventListener("click", zoomIn);
    zoomSlider.addEventListener("input", handleZoomSlider);

    fileInput.addEventListener("change", async function(e) {
        try {
            await loadImage();
            setTimeout(() => {
                applyAutoScaling();
                applyFilter();
            }, 100);
        } catch (error) {
            console.error("Błąd ładowania obrazu:", error);
        }
    });

    window.addEventListener('resize', () => {
        if (previewImg.src && previewImg.src !== window.location.href && previewImg.complete) {
            applyAutoScaling();
            applyFilter();
        }
    });

    setTimeout(() => {
        if (previewImg.complete) {
            applyAutoScaling();
        }
    }, 500);
});
</script>
</html>
Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Edytor Zdjęć to zaawansowane narzędzie do edycji obrazów online

Mały gadżet na stronę.

Edytor zdjęć online

Jak obsługiwać aplikację:
