Webleb - UI Elements - Half-Tone Image Editor

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edytor Obrazu z Filtrem Half-Tone</title>
  <style>
    body {
      background: oklch(from #fe0 .9 .064 h);
      font-family: sans-serif;
      padding: 1rem;
    }
    img {
      max-width: 100%;
      height: auto;
      margin-top: 1rem;
      filter: none;
    }
    button {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
      background-color: #166496;
      color: white;
      border: none;
      border-radius: 4px;
    }
    button:hover {
      background-color: #124d77;
    }
  </style>
</head>
<body>
  <input type="file" accept="image/*" id="upload">
  <select id="filter-select">
    <option value="">None</option>
    <option selected value="half-tone">Half-Tone</option>
    <option value="half-tone-hd">Half-Tone HD</option>
  </select>
  <input type="color" value="#166496" name="color" id="color">
  <br>
  <img src="https://i.imgur.com/CMox3HF.jpeg" id="preview" crossorigin="anonymous">
  <label for="format-select">Format:</label>
  <select id="format-select">
    <option value="png" selected>PNG</option>
    <option value="jpeg">JPEG</option>
    <option value="webp">WebP</option>
  </select>
  <button id="download">Pobierz edytowany obraz</button>

<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lum" />
        <feComponentTransfer in="lum" result="lum-map">
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>

<feComponentTransfer in="lum-map" result="thresh1">
          <feFuncA type="discrete" tableValues="1 0 0 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh2">
          <feFuncA type="discrete" tableValues="0 1 0 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh3">
          <feFuncA type="discrete" tableValues="0 0 1 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh4">
          <feFuncA type="discrete" tableValues="0 0 0 1 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh5">
          <feFuncA type="discrete" tableValues="0 0 0 0 1 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh6">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 1 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh7">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 0 1 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh8">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1" />
        </feComponentTransfer>

<feComposite in="thresh1" in2="dot1-tile" operator="in" result="level1" />
        <feComposite in="thresh2" in2="dot2-tile" operator="in" result="level2" />
        <feComposite in="thresh3" in2="dot3-tile" operator="in" result="level3" />
        <feComposite in="thresh4" in2="dot4-tile" operator="in" result="level4" />
        <feComposite in="thresh5" in2="dot5-tile" operator="in" result="level5" />
        <feComposite in="thresh6" in2="dot6-tile" operator="in" result="level6" />
        <feComposite in="thresh7" in2="dot7-tile" operator="in" result="level7" />
        <feComposite in="thresh8" in2="dot8-tile" operator="in" result="level8" />

<feMerge result="merged">
          <feMergeNode in="level8" />
          <feMergeNode in="level7" />
          <feMergeNode in="level6" />
          <feMergeNode in="level5" />
          <feMergeNode in="level4" />
          <feMergeNode in="level3" />
          <feMergeNode in="level2" />
          <feMergeNode in="level1" />
        </feMerge>

<feComposite in="merged" in2="SourceGraphic" operator="in" result="masked" />

<feFlood id="flood" flood-color="#166496" result="color" />
        <feComposite in="color" in2="masked" operator="in" />
      </filter>
    </defs>
  </svg>

<feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lum" />
        <feComponentTransfer in="lum" result="lum-map">
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>

<feComponentTransfer in="lum-map" result="thresh1">
          <feFuncA type="discrete" tableValues="1 0 0 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh2">
          <feFuncA type="discrete" tableValues="0 1 0 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh3">
          <feFuncA type="discrete" tableValues="0 0 1 0 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh4">
          <feFuncA type="discrete" tableValues="0 0 0 1 0 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh5">
          <feFuncA type="discrete" tableValues="0 0 0 0 1 0 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh6">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 1 0 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh7">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 0 1 0" />
        </feComponentTransfer>
        <feComponentTransfer in="lum-map" result="thresh8">
          <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1" />
        </feComponentTransfer>

<feComposite in="thresh1" in2="dot1-tile" operator="in" result="level1" />
        <feComposite in="thresh2" in2="dot2-tile" operator="in" result="level2" />
        <feComposite in="thresh3" in2="dot3-tile" operator="in" result="level3" />
        <feComposite in="thresh4" in2="dot4-tile" operator="in" result="level4" />
        <feComposite in="thresh5" in2="dot5-tile" operator="in" result="level5" />
        <feComposite in="thresh6" in2="dot6-tile" operator="in" result="level6" />
        <feComposite in="thresh7" in2="dot7-tile" operator="in" result="level7" />
        <feComposite in="thresh8" in2="dot8-tile" operator="in" result="level8" />

<feMerge result="merged">
          <feMergeNode in="level8" />
          <feMergeNode in="level7" />
          <feMergeNode in="level6" />
          <feMergeNode in="level5" />
          <feMergeNode in="level4" />
          <feMergeNode in="level3" />
          <feMergeNode in="level2" />
          <feMergeNode in="level1" />
        </feMerge>

<feComposite in="merged" in2="SourceGraphic" operator="in" result="masked" />

<feFlood id="floodHd" flood-color="#166496" result="color" />
        <feComposite in="color" in2="masked" operator="in" />
      </filter>
    </defs>
  </svg>

// Obsługa przesyłania obrazu
    upload.addEventListener("input", e => {
      const file = e.target.files[0];
      if (!file) return;
      preview.src = URL.createObjectURL(file);
    });

// Obsługa zmiany koloru
    color.addEventListener("input", e => {
      const val = color.value;
      flood.setAttribute("flood-color", val);
      floodHd.setAttribute("flood-color", val);
    });

// Obsługa wyboru filtra
    filterSelect.addEventListener("change", setFilter);

function setFilter() {
      const val = filterSelect.value;
      preview.style.filter = val ? `url(#${val})` : "none";
    }

// Ustaw początkowy filtr
    setFilter();

// Funkcja do renderowania SVG i konwersji do canvas
    async function renderToCanvas(imageSrc, filter, width, height) {
      return new Promise((resolve, reject) => {
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("width", width);
        svg.setAttribute("height", height);

const image = document.createElementNS(svgNS, "image");
        image.setAttribute("width", width);
        image.setAttribute("height", height);
        image.setAttribute("x", "0");
        image.setAttribute("y", "0");
        image.setAttributeNS("http://www.w3.org/1999/xlink", "href", imageSrc);
        if (filter) {
          image.setAttribute("filter", `url(#${filter})`);
        }

svg.appendChild(image);

// Serializuj SVG do ciągu
        const svgString = new XMLSerializer().serializeToString(svg);
        const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
        const svgUrl = URL.createObjectURL(svgBlob);

// Utwórz obraz z SVG
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.onload = () => {
          // Utwórz canvas
          const canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;
          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);
          URL.revokeObjectURL(svgUrl);
          resolve(canvas);
        };
        img.onerror = reject;
        img.src = svgUrl;
      });
    }

// Obsługa pobierania obrazu
    downloadBtn.addEventListener("click", async () => {
      // Upewnij się, że obraz jest załadowany
      if (!preview.complete || preview.naturalWidth === 0) {
        alert("Proszę załadować obraz przed pobraniem!");
        return;
      }

// Pobierz wybrany format
      const selectedFormat = formatSelect.value;
      const formatMap = {
        png: { mime: "image/png", ext: "png" },
        jpeg: { mime: "image/jpeg", ext: "jpg" },
        webp: { mime: "image/webp", ext: "webp" }
      };
      const { mime, ext } = formatMap[selectedFormat];

// Pobierz filtr
      const filter = filterSelect.value;

// Renderuj obraz do canvas
      const canvas = await renderToCanvas(
        preview.src,
        filter,
        preview.naturalWidth,
        preview.naturalHeight
      );

// Określ jakość dla JPEG i WebP
      const quality = selectedFormat === "png" ? undefined : 0.8;
      const dataURL = quality ? canvas.toDataURL(mime, quality) : canvas.toDataURL(mime);

// Utwórz tymczasowy link do pobierania
      const link = document.createElement("a");
      link.href = dataURL;
      link.download = `edytowany-obraz.${ext}`;

// Dodaj link do dokumentu, kliknij i usuń
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  </script>
</body>
</html>

Half-Tone Image Editor

Recommended

Frame Effect to Images using Pure CSS

Image Slider 2.0

HTML

CSS

JS

Recommended

Frame Effect to Images using Pure CSS

Image Slider 2.0

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS