Spis treści

Kadrowanie i Edycja Zdjęć

Gadżet oparty o Cropper.js. Strona GitHub projektu.

Edytor Obrazów Online to zaawansowane, darmowe narzędzie do edycji zdjęć działające bezpośrednio w przeglądarce.

Aplikacja umożliwia intuicyjne kadrowanie, obracanie i przekształcanie obrazów bez konieczności instalowania dodatkowego oprogramowania.

Dzięki responsywnemu interfejsowi użytkownicy mogą edytować zdjęcia na dowolnym urządzeniu – komputerze, tablecie czy smartfonie.

Edytor Obrazów Online

Bezpłatne narzędzie do kadrowania, obracania i edycji zdjęć. Działa w przeglądarce – bez rejestracji i instalacji.

Edytor Obrazów

Przekształcaj, kadruj i edytuj swoje zdjęcia za pomocą intuicyjnych narzędzi

Panel Edycji

Przeciągnij zdjęcie tutaj lub użyj przycisku poniżej

Otwórz zdjęcie

Narzędzia kadrowania

Podgląd Wyniku

Po edycji zdjęcia kliknij "Podgląd",
aby zobaczyć wynik tutaj

Kluczowe funkcje:

- Kadrowanie z predefiniowanymi proporcjami (16:9, 4:3, 1:1, 2:3)
- Obrót i odwracanie obrazów
- Intuicyjny interfejs oparty na ikonach
- Natychmiastowy podgląd zmian
- Pobieranie edytowanych plików w formacie PNG
- Pełna responsywność i kompatybilność z różnymi przeglądarkami

Jak wstawić gadżet na własną stronę?

Można ręcznie, lub pobrać gotowy plik.

Samodzielnie:

Tworzymy odpowiedni plik w nowym folderze: index.html. I wklejamy poniższy kod HTML.

Index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Editor 2 - Zaawansowany Edytor Obrazów</title>
    <!-- Google Font -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Cropper CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
        <!-- Schema.org markup for Google -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "Edytor Obrazów Online",
      "applicationCategory": "MultimediaApplication",
      "operatingSystem": "Any",
      "description": "Bezpłatny edytor obrazów online do kadrowania, obracania i edycji zdjęć w przeglądarce.",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "PLN"
      },
      "author": {
        "@type": "https://skrip.pl/",
        "name": "ImageEditor"
      }
    }
    </script>  
    <!-- Stylesheet -->
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      body {
        padding: 1em;
        min-height: 100vh;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        color: #333;
      }
      .container {
        max-width: 1400px;
        margin: 0 auto;
      }
      header {
        text-align: center;
        margin-bottom: 2em;
        padding: 1em;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      header h1 {
        color: #2196f3;
        margin-bottom: 0.5em;
        font-weight: 600;
      }
      header p {
        color: #666;
        max-width: 600px;
        margin: 0 auto;
      }
      .wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        align-items: flex-start;
      }
      .editor-container,
      .preview-container {
        background-color: #ffffff;
        padding: 1.5em;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        border: none;
        flex: 1;
        min-width: 300px;
      }
      .editor-container {
        display: flex;
        flex-direction: column;
      }
      .preview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
      }
      .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 1.5em;
        color: #2196f3;
        font-weight: 500;
        border-bottom: 2px solid #eaeaea;
        padding-bottom: 0.5em;
      }
      .section-title i {
        font-size: 1.2em;
      }
      input[type="file"] {
        display: none;
      }
      label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(to right, #2196f3, #21CBF3);
        color: #ffffff;
        width: 100%;
        max-width: 250px;
        font-size: 1.1em;
        text-align: center;
        padding: 1em 1.5em;
        border-radius: 8px;
        margin: 1em auto;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 6px rgba(33, 150, 243, 0.3);
      }
      label:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(33, 150, 243, 0.4);
      }
      .image-container {
        margin-bottom: 1.5em;
        width: 100%;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px dashed #ccc;
        border-radius: 8px;
        background-color: #f9f9f9;
        overflow: hidden;
      }
      img {
        max-width: 100%;
        max-height: 100%;
      }
      button,
      a {
        border: none;
        outline: none;
        cursor: pointer;
        transition: all 0.2s;
      }
      .tools-section {
        margin: 1.5em 0;
      }
      .tools-section h3 {
        margin-bottom: 1em;
        color: #555;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .options-btn {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 0.8em;
        margin-top: 1em;
      }
      .options-btn button {
        background-color: #f8f9fa;
        border: solid 1px #e1e5e9;
        color: #495057;
        border-radius: 8px;
        font-size: 0.85em;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }
      .options-btn button:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .options-btn button.active {
        background-color: #2196f3;
        color: white;
        border-color: #2196f3;
      }
      .options-btn button i {
        font-size: 1em;
      }
      .action-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        align-items: center;
        justify-content: center;
        margin-top: 2em;
      }
      #preview {
        background: linear-gradient(to right, #4CAF50, #66BB6A);
        font-size: 1em;
        padding: 0.9em 1.5em;
        color: #ffffff;
        border-radius: 8px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 6px rgba(76, 175, 80, 0.3);
      }
      #preview:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(76, 175, 80, 0.4);
      }
      #download {
        background: linear-gradient(to right, #FF5722, #FF7043);
        font-size: 1em;
        padding: 0.9em 1.5em;
        color: #ffffff;
        border-radius: 8px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 6px rgba(255, 87, 34, 0.3);
      }
      #download:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(255, 87, 34, 0.4);
      }
      .hide {
        display: none;
      }
      .preview-placeholder {
        text-align: center;
        color: #888;
      }
      .preview-placeholder i {
        font-size: 3em;
        margin-bottom: 0.5em;
        color: #ccc;
      }

      /* Responsywność */
      @media screen and (max-width: 992px) {
        .wrapper {
          flex-direction: column;
        }
        .editor-container,
        .preview-container {
          width: 100%;
        }
      }

      @media screen and (max-width: 768px) {
        body {
          padding: 0.5em;
        }
        .editor-container,
        .preview-container {
          padding: 1em;
        }
        .options-btn {
          grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        }
        .options-btn button {
          height: 50px;
          font-size: 0.7em;
        }
        .action-btns {
          flex-direction: column;
          width: 100%;
        }
        .action-btns a,
        .action-btns button {
          width: 100%;
          text-align: center;
          justify-content: center;
        }
      }

      @media screen and (max-width: 480px) {
        .options-btn {
          grid-template-columns: repeat(4, 1fr);
        }
        header h1 {
          font-size: 1.5em;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1><i class="fas fa-edit"></i> Zaawansowany Edytor Obrazów</h1>
        <p>Przekształcaj, kadruj i edytuj swoje zdjęcia za pomocą intuicyjnych narzędzi</p>
      </header>
      
      <div class="wrapper">
        <div class="editor-container">
          <div class="section-title">
            <i class="fas fa-sliders-h"></i>
            <h2>Panel Edycji</h2>
          </div>
          
          <div class="image-container">
            <img id="image" alt="Przeciągnij zdjęcie tutaj lub użyj przycisku poniżej" />
          </div>
          
          <input type="file" id="file" accept="image/*" />
          <label for="file">
            <i class="fas fa-folder-open"></i>
            Otwórz zdjęcie
          </label>
          
          <div class="tools-section">
            <h3><i class="fas fa-crop-alt"></i> Narzędzia kadrowania</h3>
            <div class="options-btn hide">
              <button id="rotate-left" title="Obróć w lewo o 90°">
                <i class="fas fa-undo"></i>
                <span>Obróć w lewo</span>
              </button>
              <button id="rotate-right" title="Obróć w prawo o 90°">
                <i class="fas fa-redo"></i>
                <span>Obróć w prawo</span>
              </button>
              <button id="scale-X-button" title="Odbij poziomo">
                <i class="fas fa-arrows-alt-h"></i>
                <span>Odbij poziomo</span>
              </button>
              <button id="scale-Y-button" title="Odbij pionowo">
                <i class="fas fa-arrows-alt-v"></i>
                <span>Odbij pionowo</span>
              </button>
              <button class="aspect-ratio-btns" data-ratio="16/9" title="Proporcje 16:9">
                <i class="fas fa-desktop"></i>
                <span>16:9</span>
              </button>
              <button class="aspect-ratio-btns" data-ratio="4/3" title="Proporcje 4:3">
                <i class="fas fa-tablet-alt"></i>
                <span>4:3</span>
              </button>
              <button class="aspect-ratio-btns" data-ratio="1/1" title="Proporcje 1:1 (Kwadrat)">
                <i class="fas fa-square"></i>
                <span>1:1</span>
              </button>
              <button class="aspect-ratio-btns" data-ratio="2/3" title="Proporcje 2:3">
                <i class="fas fa-camera"></i>
                <span>2:3</span>
              </button>
              <button class="aspect-ratio-btns" data-ratio="free" title="Dowolne proporcje">
                <i class="fas fa-expand"></i>
                <span>Dowolne</span>
              </button>
            </div>
          </div>
          
          <div class="action-btns">
            <button id="preview" class="hide">
              <i class="fas fa-eye"></i>
              Podgląd
            </button>
            <a href="" id="download" class="hide">
              <i class="fas fa-download"></i>
              Pobierz gotowe zdjęcie
            </a>
          </div>
        </div>
        
        <div class="preview-container">
          <div class="section-title">
            <i class="fas fa-check-circle"></i>
            <h2>Podgląd Wyniku</h2>
          </div>
          <div class="image-container">
            <img id="preview-image" alt="Tutaj pojawi się podgląd edytowanego zdjęcia" />
            <div id="preview-placeholder" class="preview-placeholder">
              <i class="fas fa-image"></i>
              <p>Po edycji zdjęcia kliknij "Podgląd",<br>aby zobaczyć wynik tutaj</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Script -->
    <script>
      // Elementy DOM
      let fileInput = document.getElementById("file");
      let image = document.getElementById("image");
      let downloadButton = document.getElementById("download");
      let aspectRatioBtns = document.querySelectorAll(".aspect-ratio-btns");
      const rotateRightButton = document.getElementById("rotate-right");
      const rotateLeftButton = document.getElementById("rotate-left");
      const scaleXButton = document.getElementById("scale-X-button");
      const scaleYButton = document.getElementById("scale-Y-button");
      const previewButton = document.getElementById("preview");
      const previewImage = document.getElementById("preview-image");
      const previewPlaceholder = document.getElementById("preview-placeholder");
      const options = document.querySelector(".options-btn");
      
      // Zmienne globalne
      let cropper = "";
      let fileName = "";
      let scaleXClick = false,
        scaleYClick = false;

      // Inicjalizacja przy ładowaniu okna
      window.onload = () => {
        downloadButton.classList.add("hide");
        options.classList.add("hide");
        previewButton.classList.add("hide");
        previewImage.classList.add("hide");
      };

      // Obsługa wyboru pliku
      fileInput.onchange = () => {
        let reader = new FileReader();
        reader.readAsDataURL(fileInput.files[0]);
        reader.onload = () => {
          image.setAttribute("src", reader.result);
          
          if (cropper) {
            cropper.destroy();
          }
          
          cropper = new Cropper(image, {
            viewMode: 1,
            responsive: true,
            restore: true,
            autoCropArea: 0.8,
            checkCrossOrigin: false,
          });
          
          options.classList.remove("hide");
          previewButton.classList.remove("hide");
        };
        fileName = fileInput.files[0].name.split(".")[0];
      };

      // Zmiana proporcji
      aspectRatioBtns.forEach((element) => {
        element.addEventListener("click", () => {
          // Usuń klasę active ze wszystkich przycisków proporcji
          aspectRatioBtns.forEach(btn => btn.classList.remove('active'));
          // Dodaj klasę active do klikniętego przycisku
          element.classList.add('active');
          
          if (element.dataset.ratio === "free") {
            cropper.setAspectRatio(NaN);
          } else {
            cropper.setAspectRatio(eval(element.dataset.ratio));
          }
        });
      });

      // Obsługa przycisków obrotu
      rotateRightButton.addEventListener("click", () => {
        cropper.rotate(90);
      });

      rotateLeftButton.addEventListener("click", () => {
        cropper.rotate(-90);
      });

      // Odbicie poziome
      scaleXButton.addEventListener("click", () => {
        if (scaleXClick) {
          cropper.scaleX(1);
          scaleXClick = false;
          scaleXButton.classList.remove('active');
        } else {
          cropper.scaleX(-1);
          scaleXClick = true;
          scaleXButton.classList.add('active');
        }
      });

      // Odbicie pionowe
      scaleYButton.addEventListener("click", () => {
        if (scaleYClick) {
          cropper.scaleY(1);
          scaleYClick = false;
          scaleYButton.classList.remove('active');
        } else {
          cropper.scaleY(-1);
          scaleYClick = true;
          scaleYButton.classList.add('active');
        }
      });

      // Podgląd obrazu
      previewButton.addEventListener("click", () => {
        downloadButton.classList.remove("hide");
        let imgSrc = cropper.getCroppedCanvas({}).toDataURL();
        previewImage.src = imgSrc;
        previewImage.classList.remove("hide");
        previewPlaceholder.classList.add("hide");
      });

      // Pobieranie obrazu
      downloadButton.addEventListener("click", (e) => {
        let imgSrc = cropper.getCroppedCanvas({}).toDataURL();
        downloadButton.download = `edytowane_${fileName}.png`;
        downloadButton.setAttribute("href", imgSrc);
      });
    </script>
  </body>
</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 Obrazów Online – Kadrowanie i Edycja Zdjęć

Prosty gadżet do przycinania i edycji fotek.

Kadrowanie i Edycja Zdjęć

Edytor Obrazów Online

Edytor Obrazów