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.
![Zwischenablagenanzeige unter macOS, die den Inhalt der Zwischenablage prüft Er zeigt
dass die Attribute des Ereignis-Listeners "onclick" in der SVG-Datei noch vorhanden sind.](https://developer.chrome.google.cn/static/blog/svg-support-for-async-clipboard-api/svgsupportfort--jlkftlu5qa.png?authuser=0000&hl=de)
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.
Weitere Informationen
- Produktionssoftware, die diese Funktion verwendet: <ph type="x-smartling-placeholder">
- ChromeStatus-Eintrag
- Versandabsicht
- Chromium-Fehler
- Position der WebKit-Standards
- Position von Mozilla Standards
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.