SVGcode: eine PWA zum Konvertieren von Rasterbildern in SVG-Vektorgrafiken

SVGcode ist eine progressive Web-App, mit der Sie Rasterbilder wie JPG, PNG, GIF, WebP, AVIF usw. in Vektorgrafiken im SVG-Format konvertieren können. Sie verwendet die File System Access API, die Async Clipboard API, die File Handling API und die Overlay-Anpassung der Fenstersteuerelemente.

Thomas Steiner

Vom Raster zum Vektor

Haben Sie schon einmal ein Bild skaliert und das Ergebnis war verpixelt und nicht zufriedenstellend? Wenn Sie haben wahrscheinlich schon ein Rasterbildformat wie WebP, PNG oder JPG verwendet.

Vektorgrafiken hingegen sind Bilder, die durch Punkte in einem Koordinatensystem definiert sind. Diese Punkte werden durch Linien und Kurven verbunden, um Polygone und andere Formen zu bilden. Vektorgrafiken haben eine Vorteil gegenüber Rastergrafiken, da sie je nach Auflösung hoch- oder herunterskaliert werden können. ohne Verpixelung.

Jetzt neu: SVG-Code

Ich habe eine PWA namens SVGcode entwickelt, mit der Sie Rasterbilder in Vektoren. Ehre, wo Anerkennung fällig ist: Das habe ich nicht erfunden. Mit SVGcode stehe ich einfach Schultern des Befehlszeilentools Potrace, Peter Selinger, in Web Assembly umgewandelt, damit sie in einem Web-App.

</ph> <ph type="x-smartling-placeholder">

SVG-Code verwenden

Zuerst möchte ich Ihnen zeigen, wie Sie die App verwenden. Ich beginne mit dem Teaser-Image für den Chrome Dev Summit. die ich vom Twitter-Kanal ChromiumDev heruntergeladen habe. Dies ist ein PNG-Rasterbild, das in die SVGcode-App ziehen. Die App zeichnet das Bild farbig ab, bis eine vektorisierte Version der Eingabe angezeigt wird. Ich kann jetzt an das Bild heranzoomen bleiben die Kanten scharf. Beim Heranzoomen des Chrome-Logos sehen Sie, und besonders die Umrisse des Logos sehen ein wenig gesprengt aus. Ich kann das Ergebnis verbessern, indem ich Flecken werden durch Unterdrücken von Sprenkeln von bis zu fünf Pixeln entfernt.

Posterisierung in SVG-Code

Ein wichtiger Schritt bei der Vektorisierung, insbesondere bei fotografischen Bildern, besteht darin, Bild, um die Anzahl der Farben zu verringern. Mit SVGcode kann ich dies für jeden Farbkanal tun und die eine SVG-Datei erstellt, wenn ich Änderungen vornehme. Wenn ich mit dem Ergebnis zufrieden bin, kann ich die SVG-Datei auf meiner Festplatte speichern. und überall nutzen.

In SVGcode verwendete APIs

Jetzt wissen Sie, was die App alles kann. Jetzt zeige ich Ihnen einige der APIs, die wie die Magie aussehen.

Progressive Web-App

SVGcode ist eine installierbare progressive Web-App und daher vollständig offline. Die App basiert am Vanilla-JS-Vorlage für Vite.js und verwendet die beliebten Vite-Plug-in PWA, mit dem ein Service Worker erstellt wird, der verwendet im Hintergrund Workbox.js. Die Workbox ist ein Set von Bibliotheken, die einen produktionsreifen Service Worker für progressive Web-Apps unterstützen können. Dieses Muster funktioniert möglicherweise nicht unbedingt für alle Apps, aber für den Anwendungsfall von SVGcode ist es hervorragend.

Overlay der Fenstersteuerelemente

Zur Maximierung des verfügbaren Platzes auf dem Bildschirm verwendet SVGcode Anpassung des Overlays für Fenstersteuerelemente durch Verschieben des Hauptmenüs nach oben Titelleisten-Bereich. Diese Option wird am Ende des Installationsvorgangs aktiviert.

File System Access API

Um Eingabebilddateien zu öffnen und die resultierenden SVGs zu speichern, verwende ich die File System Access API So kann ich einen Verweis auf frühere Dateien öffnen und da weitermachen, wo ich aufgehört habe, auch wenn die App neu geladen wurde. Jedes Mal, wenn ein Bild gespeichert ist, wird es über die svgo-Bibliothek optimiert. Dies kann einen Moment dauern. abhängig von der Komplexität der SVG. Das Anzeigen des Dialogfelds zum Speichern von Dateien erfordert eine Nutzergeste. Es ist Daher ist es wichtig, das Datei-Handle vor der SVG-Optimierung abzurufen, damit der Nutzer Die Touch-Geste wird erst ungültig, wenn das optimierte SVG bereit ist.

try {
  let svg = svgOutput.innerHTML;
  let handle = null;
  // To not consume the user gesture obtain the handle before preparing the
  // blob, which may take longer.
  if (supported) {
    handle = await showSaveFilePicker({
      types: [{description: 'SVG file', accept: {'image/svg+xml': ['.svg']}}],
    });
  }
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  showToast(i18n.t('savedSVG'));
  const blob = new Blob([svg], {type: 'image/svg+xml'});
  await fileSave(blob, {description: 'SVG file'}, handle);
} catch (err) {
  console.error(err.name, err.message);
  showToast(err.message);
}

Drag-and-Drop

Zum Öffnen eines Eingabebildes kann ich entweder die Funktion zum Öffnen von Dateien verwenden oder, wie Sie oben gesehen haben, einfach Ziehen Sie eine Bilddatei in die App. Die Funktion zum Öffnen von Dateien ist ziemlich einfach, interessant ist das Drag-and-drop. Das Tolle daran ist, dass Sie ein Dateisystem-Handle vom Datenübertragungselement über die getAsFileSystemHandle() . Wie bereits erwähnt, kann ich diesen Alias beibehalten, damit er bereit ist, wenn die App neu geladen wird.

document.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropContainer.classList.remove('dropenter');
  const item = event.dataTransfer.items[0];
  if (item.kind === 'file') {
    inputImage.addEventListener(
      'load',
      () => {
        URL.revokeObjectURL(blobURL);
      },
      {once: true},
    );
    const handle = await item.getAsFileSystemHandle();
    if (handle.kind !== 'file') {
      return;
    }
    const file = await handle.getFile();
    const blobURL = URL.createObjectURL(file);
    inputImage.src = blobURL;
    await set(FILE_HANDLE, handle);
  }
});

Weitere Informationen finden Sie im Artikel zur File System Access API. Sehen Sie sich bei Interesse den SVG-Code-Quellcode in src/js/filesystem.js

Async Clipboard API

SVGcode ist über die Async Clipboard API auch vollständig in die Zwischenablage des Betriebssystems integriert. Sie können Bilder aus dem Datei-Explorer des Betriebssystems in die App einfügen. Klicken Sie dazu entweder auf das Schaltfläche zum Einfügen des Bildes oder drücken Sie die Befehlstaste oder Strg + V auf Ihrer Tastatur.

Seit Kurzem können mit der Async Clipboard API auch SVG-Bilder verarbeitet werden. Sie können auch ein SVG-Bild kopieren und zur weiteren Verarbeitung in eine andere Anwendung einfügen.

copyButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  showToast(i18n.t('optimizingSVG'), Infinity);
  svg = await optimizeSVG(svg);
  const textBlob = new Blob([svg], {type: 'text/plain'});
  const svgBlob = new Blob([svg], {type: 'image/svg+xml'});
  navigator.clipboard.write([
    new ClipboardItem({
      [svgBlob.type]: svgBlob,
      [textBlob.type]: textBlob,
    }),
  ]);
  showToast(i18n.t('copiedSVG'));
});

Weitere Informationen findest du im Artikel zur asynchronen Zwischenablage oder in der Datei src/js/clipboard.js

Dateiverarbeitung

Eine der besten Funktionen von SVGcode ist, wie gut sich das Programm in das Betriebssystem einfügt. Als PWA installiert haben, kann sie zu einem Datei-Handler oder sogar zum Standard-Datei-Handler für Bilddateien werden. Dieses Wenn ich mich im Finder auf meinem macOS-Computer befinde, kann ich mit der rechten Maustaste auf ein Bild klicken und es mit SVG-Code. Diese Funktion wird Dateibehandlung genannt und basiert auf der Eigenschaft file_handlers im Web-App-Manifest und die Startwarteschlange, wodurch die App die übergebene Datei verarbeiten kann.

window.launchQueue.setConsumer(async (launchParams) => {
  if (!launchParams.files.length) {
    return;
  }
  for (const handle of launchParams.files) {
    const file = await handle.getFile();
    if (file.type.startsWith('image/')) {
      const blobURL = URL.createObjectURL(file);
      inputImage.addEventListener(
        'load',
        () => {
          URL.revokeObjectURL(blobURL);
        },
        {once: true},
      );
      inputImage.src = blobURL;
      await set(FILE_HANDLE, handle);
      return;
    }
  }
});

Weitere Informationen finden Sie unter Lassen Sie installierte Webanwendungen als Datei-Handler verwenden und sehen Sie sich den Quellcode in src/js/filehandling.js

Web Share (Dateien)

Ein weiteres Beispiel für die Anpassung an das Betriebssystem ist die Funktion zum Teilen der App. Angenommen, ich möchte eine mit SVGcode erstellte SVG-Datei bearbeiten, wäre eine Möglichkeit, die Datei zu speichern, die SVG-Bearbeitungs-App starten und die SVG-Datei von dort aus öffnen. Ein reibungsloserer Ablauf besteht jedoch darin, verwenden Sie die Web Share API, mit der Dateien direkt freigegeben werden können. Wenn also die SVG-Bearbeitungs-App ein Ziel zum Teilen ist, kann sie die Datei ohne Abweichung direkt empfangen.

shareSVGButton.addEventListener('click', async () => {
  let svg = svgOutput.innerHTML;
  svg = await optimizeSVG(svg);
  const suggestedFileName =
    getSuggestedFileName(await get(FILE_HANDLE)) || 'Untitled.svg';
  const file = new File([svg], suggestedFileName, { type: 'image/svg+xml' });
  const data = {
    files: [file],
  };
  if (navigator.canShare(data)) {
    try {
      await navigator.share(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error(err.name, err.message);
      }
    }
  }
});

Web Share Target (Dateien)

Umgekehrt kann SVGcode auch als Ziel zum Teilen und Empfangen von Dateien von anderen Apps verwendet werden. Bis um dies funktioniert, muss die App das Betriebssystem über die Web Share Target API, welche Datentypen akzeptiert werden. Dies geschieht über eine im Web App Manifest.

{
  "share_target": {
    "action": "https://svgco.de/share-target/",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "image",
          "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
        }
      ]
    }
  }
}

Die action-Route ist nicht tatsächlich vorhanden, wird aber ausschließlich im fetch des Service Workers verarbeitet. -Handler, der dann empfangene Dateien zur eigentlichen Verarbeitung in der App übergibt.

self.addEventListener('fetch', (fetchEvent) => {
  if (
    fetchEvent.request.url.endsWith('/share-target/') &&
    fetchEvent.request.method === 'POST'
  ) {
    return fetchEvent.respondWith(
      (async () => {
        const formData = await fetchEvent.request.formData();
        const image = formData.get('image');
        const keys = await caches.keys();
        const mediaCache = await caches.open(
          keys.filter((key) => key.startsWith('media'))[0],
        );
        await mediaCache.put('shared-image', new Response(image));
        return Response.redirect('./?share-target', 303);
      })(),
    );
  }
});

Fazit

In Ordnung, das war eine kurze Einführung durch einige der erweiterten App-Funktionen in SVGcode. Ich hoffe, dass diese App kann in der Bildverarbeitung und neben anderen erstklassigen Apps wie Squoosh oder SVGOMG:

Der SVG-Code ist unter svgco.de verfügbar. Siehst du, was ich dort gemacht habe? Sie können den Quellcode auf GitHub ansehen. Da Potrace SVG-Code ist ebenfalls von GPL lizenziert. Viel Spaß beim Vektorisieren! Ich hoffe, SVGcode wird Ihnen weiterhelfen. können einige der Funktionen als Inspiration für Ihre nächste App dienen.

Danksagungen

Dieser Artikel wurde von Joe Medley geprüft.