Die vorliegende Aufgabe umfasste die Entwicklung einer Webanwendung, die es Benutzern gestattet, PNG-Bilder mit abgerundeten Ecken zu generieren und zu speichern.

Autor: Stephan Krohn Kategorie: Blog

Beitragsseiten

Seite 2 von 2

Die vorliegende Aufgabe umfasst die Entwicklung einer Webanwendung, die es Benutzern gestattet, PNG-Bilder mit abgerundeten Ecken zu generieren und zu speichern. Die Realisierung dieses Vorhabens soll ausschließlich mittels HTML und JavaScript erfolgen, ohne die Verwendung externer Bibliotheken.

Das definierte Anwendungszenario sieht einen zweckmäßigen Workflow vor:
1. Ein Benutzer lädt eine Bilddatei hoch.
2. Der Benutzer konfiguriert den gewünschten Eckradius über einen Schieberegler.
3. Das hochgeladene Bild wird auf ein HTML5-Canvas-Element gezeichnet.
4. Die Modifikation der Ecken wird auf das Canvas-Element angewendet.
5. Das resultierende Bild kann als PNG-Datei heruntergeladen werden.

Ein kritischer Aspekt der Implementierung ist die Sicherstellung der Erhaltung der Transparenz des ursprünglichen Bildes während des gesamten Prozesses.

Die gesamte Funktionalität wird in einer einzelnen HTML-Datei integriert. Diese Strukturierung ist auf eine optimierte Dokumentation und eine vereinfachte Wartbarkeit ausgelegt.

Quelltext anzeigen klick

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>PNG Ecken abrunden</title>
</head>
<body>
<div class="wrap">
  <h1>PNG Ecken abrunden</h1>
  <p style="font-size:0.9rem;">
    Läuft komplett im Browser. PNG wählen, Radius einstellen, dann als neues PNG speichern.
  </p>

<label for="fileInput">PNG auswählen</label>
  <input id="fileInput" type="file" accept="image/png">

<div class="row">
    <div class="col">
      <div class="preview-box">
        <strong style="font-size:0.9rem;">Original</strong>
        <img id="originalImg" alt="Original Vorschau">
      </div>
    </div>
    <div class="col">
      <div class="preview-box">
        <strong style="font-size:0.9rem;">Mit abgerundeten Ecken</strong>
        <canvas id="canvas"></canvas>

<div class="controls">
          <label for="radiusRange">Radius der Ecken (px)</label>
          <input id="radiusRange" type="range" min="0" max="300" value="40">
          <div class="hint">
            <span>Aktueller Radius: <span id="radiusValue">40</span> px</span>
          </div>
          <button id="downloadBtn" class="btn" disabled>Abgerundetes PNG herunterladen</button>
        </div>
      </div>
    </div>
  </div>

<p class="hint">
    Hinweis: Transparenz bleibt erhalten. Die Datei wird nur lokal im Browser verarbeitet.
  </p>
</div>

let loadedImage = null;

fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;

if (file.type !== 'image/png') {
      alert('Bitte eine PNG-Datei auswählen.');
      fileInput.value = '';
      return;
    }

radiusRange.addEventListener('input', () => {
    radiusValue.textContent = radiusRange.value;
    if (loadedImage) {
      drawRounded();
    }
  });

function drawRounded() {
    const img = loadedImage;
    if (!img) return;

const w = img.width;
    const h = img.height;
    let r = parseInt(radiusRange.value, 10) || 0;
    const maxR = Math.min(w, h) / 2;
    if (r > maxR) r = maxR;

canvas.width = w;
    canvas.height = h;

ctx.clearRect(0, 0, w, h);
    ctx.save();
    roundedRectPath(ctx, 0, 0, w, h, r);
    ctx.clip();
    ctx.drawImage(img, 0, 0, w, h);
    ctx.restore();
  }

function roundedRectPath(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
    ctx.lineTo(x + w, y + h - r);
    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
    ctx.lineTo(x + r, y + h);
    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();
  }

downloadBtn.addEventListener('click', () => {
    if (!loadedImage) return;
    canvas.toBlob((blob) => {
      if (!blob) return;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'rounded-corners.png';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 'image/png');
  });
</script>
<div class="modal fade" id="plg_system_eprivacy_modal" tabindex="-1" aria-labelledby="plg_system_eprivacy_modal_label" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="plg_system_eprivacy_modal_label">Wir schätzen Ihre Privatsphäre</h5>
      </div>
      <div class="modal-body">
        <p class="text-center"><span class="fa-stack fa-2x mx-auto d-none d-lg-block"><i class="fas fa-shield fa-stack-2x text-dark"></i><i class="fas fa-user fa-stack-1x text-light"></i></span></p>
        <p>Diese Website verwendet Cookies, um die Darstellung und Funktion der Seiten zu gewährleisten. Es werden keine personenbezogenen Daten zu Werbe‑ oder Trackingzwecken ausgewertet. Durch die Nutzung dieser Website erklären Sie sich mit dem Einsatz von Cookies einverstanden.</p>
                <p><a href="/index.php/datenschutz" target="_blank">Datenschutzerklärung</a></p>
                <div class="accordion accordion-flush" id="plg_system_eprivacy_details">
            <div class="accordion-item">
                <div class="accordion-header" id="plg_system_eprivacy_details_header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#plg_system_eprivacy_details_content" aria-expanded="false" aria-controls="plg_system_eprivacy_details_content">Details</button>
                </div>
                <div class="accordion-collapse collapse" id="plg_system_eprivacy_details_content" aria-labelledby="plg_system_eprivacy_details_header" data-bs-parent="#plg_system_eprivacy_details">
                    <div class="accordion-body">
                                                                        </div>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger decline">Ablehnen</button>
        <button type="button" class="btn btn-success accept">Akzeptieren</button>
      </div>
    </div>
  </div>
</div></body>
</html>

Zugriffe: 106

SK-REG BLOG

Ecken abrunden lokal im Brauser - Die vorliegende Aufgabe umfasste die Entwicklung einer Webanwendung, die es Benutzern gestattet, PNG-Bilder mit abgerundeten Ecken zu generieren und zu speichern.

Beitragsseiten