Interfejs Clipboard
interfejsu Async Clipboard API zapewnia uprawnienia do odczytu i zapisu zawartości schowka systemowego. Dzięki temu aplikacja internetowa może wdrożyć funkcje wycinania, kopiowania i wklejania. Możesz wkleić dane ze schowka do aplikacji, wywołując metodę read()
, a następnie kopiować dane do schowka przy użyciu metody write()
.
Oprócz tekstu, obrazów w formacie Portable Network Graphics (PNG), oczyszczonego i nieoczyszczonego kodu HTML oraz niestandardowych formatów internetowych interfejs Async Clipboard API obsługuje teraz również kopiowanie i wklejanie obrazów SVG, co oznacza, że możesz w końcu korzystać z oprogramowania do edycji obrazów, które w bardziej naturalny sposób obsługuje pliki SVG dzięki kopiowaniu i wklejaniu obrazów tekstowych SVG jako obrazów lub wklejaniu ich jako obrazów tekstowych.
Obsługa plików SVG z wykrywaniem cech
Wykrywaj obsługę obrazów SVG (i innych typów MIME), wywołując statyczną metodę ClipboardItem.supports()
i przekazując jej żądany typ MIME.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Kopiowanie obrazu SVG
Skopiuj obraz SVG, wypełniając obiekt ClipboardItem
za pomocą obiektu. Obiekt blob z danymi obrazu SVG to wartość i typ obiektu blob (w tym przypadku 'image/svg+xml'
) jako klucz.
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);
}
});
Wklejanie obrazu SVG
Aby wkleić obraz SVG, odczytaj ze schowka ClipboardItem
i pobierz odpowiedni typ (w tym przypadku 'image/svg+xml'
) za pomocą metody getType()
. Spowoduje to zwrócenie obiektu blob, który po przekonwertowaniu na adres URL obiektu blob można przypisać do atrybutu src
<img>
.
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;
});
Dezynfekcja
SVG to zaawansowany format, który umożliwia np. umieszczanie skryptów. Może to być niebezpieczne, gdy użytkownik wkleja treści z nieznanych źródeł, więc przeglądarka przeprowadza etap oczyszczania. Podczas kopiowania danych interfejs Async Clipboard API tworzy poprawnie sformatowany dokument SVG i zapisuje go w schowku. Po wklejeniu danych parser fragmentów tworzy ściśle przetworzony fragment SVG. Dlatego przed wklejeniem atrybuty modułu obsługi zdarzeń onclick
są nadal dostępne, ale po wklejeniu zostają usunięte.
Pokaz
Odkryj kopiowanie i wklejanie plików SVG w wersji demonstracyjnej Glitch. Aby dowiedzieć się, jak to działa, wyświetl kod źródłowy. Przed kopiowaniem i wklejeniem
warto kliknąć dowolne kółka. Po wklejeniu potencjalnie niebezpieczne atrybuty modułu obsługi zdarzeń onclick
są usuwane.
Powiązane artykuły
- Oprogramowanie produkcyjne korzystające z tej funkcji:
- Wpis ChromeStatus
- Zamiar wysyłki
- Błąd Chromium
- Pozycja WebKit Standards
- Stanowisko Mozilla Standard
Podziękowania
Obsługa formatu SVG w interfejsie Async Clipboard API w Chromium została wdrożona przez zespół Microsoft Edge. Ten post został zrecenzowany przez Rachel Andrew i Anupam Snigdha.