WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Halbtonbild-Editor
148
zegarkidawida
Im Editor öffnen
Veröffentlichen Sie Ihren Code
HTML
Copy
<!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> <svg class="svg" x="0" y="0" width="0" height="0"> <defs> <!-- Circles from r=0.5 to r=4 --> <circle id="dot1" cx="4" cy="4" r="0.5" /> <circle id="dot2" cx="4" cy="4" r="1" /> <circle id="dot3" cx="4" cy="4" r="1.5" /> <circle id="dot4" cx="4" cy="4" r="2" /> <circle id="dot5" cx="4" cy="4" r="2.5" /> <circle id="dot6" cx="4" cy="4" r="3" /> <circle id="dot7" cx="4" cy="4" r="3.5" /> <circle id="dot8" cx="4" cy="4" r="4" /> <filter id="half-tone" color-interpolation-filters="sRGB" primitiveUnits="userSpaceOnUse"> <!-- Tiled circles --> <feImage width="8" height="8" xlink:href="#dot1" /> <feTile result="dot1-tile" /> <feImage width="8" height="8" xlink:href="#dot2" /> <feTile result="dot2-tile" /> <feImage width="8" height="8" xlink:href="#dot3" /> <feImage width="8" height="8" xlink:href="#dot4" /> <feTile result="dot4-tile" /> <feImage width="8" height="8" xlink:href="#dot5" /> <feTile result="dot5-tile" /> <feImage width="8" height="8" xlink:href="#dot6" /> <feTile result="dot6-tile" /> <feImage width="8" height="8" xlink:href="#dot7" /> <feTile result="dot7-tile" /> <feImage width="8" height="8" xlink:href="#dot8" /> <feTile result="dot8-tile" /> <!-- Luminance mapping --> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lum" /> <feComponentTransfer in="lum" result="lum-map"> <feFuncA type="table" tableValues="1 0" /> </feComponentTransfer> <!-- Discrete thresholds --> <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> <!-- Combine dots with thresholds --> <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" /> <!-- Merge everything --> <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> <!-- Clip to original shape --> <feComposite in="merged" in2="SourceGraphic" operator="in" result="masked" /> <!-- Apply color --> <feFlood id="flood" flood-color="#166496" result="color" /> <feComposite in="color" in2="masked" operator="in" /> </filter> </defs> </svg> <svg class="svg" x="0" y="0" width="0" height="0"> <defs> <!-- Circles from r=0.25 to r=2 --> <circle id="dot1" cx="2" cy="2" r="0.25" /> <circle id="dot2" cx="2" cy="2" r="0.5" /> <circle id="dot3" cx="2" cy="2" r="0.75" /> <circle id="dot4" cx="2" cy="2" r="1" /> <circle id="dot5" cx="2" cy="2" r="1.25" /> <circle id="dot6" cx="2" cy="2" r="1.5" /> <circle id="dot7" cx="2" cy="2" r="1.75" /> <circle id="dot8" cx="2" cy="2" r="2" /> <filter id="half-tone-hd" color-interpolation-filters="sRGB" primitiveUnits="userSpaceOnUse"> <!-- Tiled circles --> <feImage width="4" height="4" xlink:href="#dot1" /> <feTile result="dot1-tile" /> <feImage width="4" height="4" xlink:href="#dot2" /> <feTile result="dot2-tile" /> <feImage width="4" height="4" xlink:href="#dot3" /> <feTile result="dot3-tile" /> <feImage width="4" height="4" xlink:href="#dot4" /> <feTile result="dot4-tile" /> <feImage width="4" height="4" xlink:href="#dot5" /> <feTile result="dot5-tile" /> <feImage width="4" height="4" xlink:href="#dot6" /> <feTile result="dot6-tile" /> <feImage width="4" height="4" xlink:href="#dot7" /> <feTile result="dot7-tile" /> <feImage width="4" height="4" xlink:href="#dot8" /> <feTile result="dot8-tile" /> <!-- Luminance mapping --> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lum" /> <feComponentTransfer in="lum" result="lum-map"> <feFuncA type="table" tableValues="1 0" /> </feComponentTransfer> <!-- Discrete thresholds --> <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> <!-- Combine dots with thresholds --> <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" /> <!-- Merge everything --> <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> <!-- Clip Clip to original shape --> <feComposite in="merged" in2="SourceGraphic" operator="in" result="masked" /> <!-- Apply color --> <feFlood id="floodHd" flood-color="#166496" result="color" /> <feComposite in="color" in2="masked" operator="in" /> </filter> </defs> </svg> <script> // Pobierz elementy z DOM const preview = document.getElementById("preview"); const upload = document.getElementById("upload"); const color = document.getElementById("color"); const filterSelect = document.getElementById("filter-select"); const downloadBtn = document.getElementById("download"); const flood = document.getElementById("flood"); const floodHd = document.getElementById("floodHd"); const formatSelect = document.getElementById("format-select"); // 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>
CSS
Copy
<!-- Replace with your CSS Code (Leave empty if not needed) -->
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
