SVG-Unterstützung für die Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Die Clipboard-Schnittstelle von bietet die Async Clipboard API Lese- und Schreibzugriff auf den Inhalt der Systemzwischenablage. So können in einer Webanwendung Ausschneiden, Kopieren und Elemente einfügen. So fügen Sie Daten aus der Zwischenablage in eine Anwendung ein: das Aufrufen der read()-Methode, und kopieren Sie Daten in die Zwischenablage, indem Sie die Methode write()-Methode. Abgesehen von text Bilder in Portable Network Grafikformat (PNG), bereinigt und unbereinigten HTML-Code und Benutzerdefinierte Webformate, die Die Async Clipboard API unterstützt jetzt auch das Kopieren und Einfügen von SVG-Bildern, bedeutet, dass Sie endlich mit Bildbearbeitungssoftware interagieren können, die SVGs verarbeitet. durch Kopieren und Einfügen von SVG-Bildern als Bilder und nicht als Text oder mit Tipps zur Umgehung von Problemen.

Unterstützung für SVG-Funktionserkennung

Erkennen der Unterstützung für SVG-Bilder und alle anderen MIME-Typen durch den Aufruf der Methode statische ClipboardItem.supports()-Methode und übergeben Sie den gewünschten MIME-Typ.

const supportsSVG = () => {
  if (
    !('supports' in window.ClipboardItem) ||
    !window.ClipboardItem.supports('image/svg+xml')
  ) {
    return false;
  }
  return true;
};

SVG-Bild kopieren

Kopieren eines SVG-Bilds durch Ausfüllen des ClipboardItem mit ein -Objekt. Das Blob mit den SVG-Bilddaten ist der Wert und der Blob-Typ (in diesem Fall 'image/svg+xml') als Schlüssel verwenden.

copyButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  try {
    const blob = await fetch(img.src).then((response) => response.blob());
    await navigator.clipboard.write([
      new window.ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  } catch (err) {
    console.error(err.name, err.message);
    alert(err.message);
  }
});

SVG-Bild einfügen

Um ein SVG-Bild einzufügen, lesen Sie den ClipboardItem aus der Zwischenablage aus und rufen Sie den gewünschten Typ ab (in diesem Fall 'image/svg+xml'). getType()-Methode. Dadurch wird ein Blob zurückgegeben, das nach der Konvertierung in eine Blob-URL die Sie dem Attribut src einer <img> zuweisen können.

pasteButton.addEventListener('click', async () => {
  if (!supportsSVG()) {
    return;
  }
  const [clipboardItem] = await navigator.clipboard.read();
  const svgBlob = await clipboardItem.getType('image/svg+xml');
  if (!svgBlob) {
    alert('No SVG in the clipboard.');
    return;
  }
  const image = document.createElement('img');
  const blobURL = URL.createObjectURL(svgBlob);
  image.addEventListener('load', () => {
    URL.revokeObjectURL(blobURL);
  });
  image.src = blobURL;
});

Bereinigung

SVG ist ein leistungsstarkes Format, bei dem zum Beispiel Skripts eingebettet werden können. Dabei kann es sich um wenn der Nutzer Inhalte aus unbekannten Quellen einfügt, sodass der der Browser einen Bereinigungsschritt ausführt. Beim Kopieren von Daten zeigt die Async Clipboard API erstellt ein wohlgeformtes SVG-Dokument und schreibt es in die Zwischenablage. Wann? Daten eingefügt werden, wird durch das Fragment ein streng verarbeitetes SVG-Fragment erzeugt. parser. Daher wird der onclick-Event-Handler vor dem Einfügen Attribute sind noch vorhanden, werden aber beim Einfügen entfernt.

<ph type="x-smartling-placeholder">
</ph> Zwischenablagenanzeige unter macOS, die den Inhalt der Zwischenablage prüft Er zeigt dass die Attribute des Ereignis-Listeners &quot;onclick&quot; in der SVG-Datei noch vorhanden sind.
Clipboard Viewer App unter macOS, mit dem der Inhalt der Zwischenablage überprüft wird. Er zeigt dass die Attribute des Ereignis-Listeners „onclick“ in der SVG-Datei noch vorhanden sind.

Demo

Entdecken Sie, wie Sie SVGs in der Demo zu Glitch Sehen Sie sich die Quellcode um zu sehen, wie es funktioniert. Klicken Sie auf einen der Kreise davor und danach. Kopieren und Einfügen. Nach dem Einfügen wird das potenziell gefährliche onclick-Ereignis Handler-Attribute entfernt.

Danksagungen

Die SVG-Unterstützung für die Async Clipboard API in Chromium wurde vom Microsoft Edge-Team Dieser Beitrag wurde von Rachel Andrew und Anupam Snigdha bewertet.