Antarmuka Clipboard
dari Async Clipboard API memberikan akses baca dan tulis ke konten
papan klip sistem. Hal ini memungkinkan aplikasi web menerapkan fitur potong, salin, dan
tempel. Anda dapat menempelkan data dari papan klip ke aplikasi dengan
memanggil
metode read()
,
dan menyalin data ke dalam papan klip dengan memanggil
metode write()
.
Selain teks,
gambar dalam format Portable Network
Graphics (PNG),
HTML yang rapi dan tidak rapi, serta
format kustom Web,
Async Clipboard API kini juga mendukung salin dan tempel gambar SVG, yang
berarti Anda akhirnya dapat berinteraksi dengan software pengeditan gambar yang menangani SVG
secara lebih alami dengan menyalin dan menempelkan gambar SVG sebagai gambar, bukan sebagai teks atau
menggunakan hacky.
Dukungan SVG deteksi fitur
Deteksi dukungan untuk gambar SVG (dan jenis MIME lainnya) dengan memanggil
metode ClipboardItem.supports()
statis, dengan meneruskan jenis MIME yang diinginkan.
const supportsSVG = () => {
if (
!('supports' in window.ClipboardItem) ||
!window.ClipboardItem.supports('image/svg+xml')
) {
return false;
}
return true;
};
Salin gambar SVG
Salin gambar SVG dengan mengisi
ClipboardItem
dengan
objek. Blob dengan data gambar SVG adalah nilai dan jenis blob
(dalam hal ini, 'image/svg+xml'
) sebagai kuncinya.
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);
}
});
Menempelkan gambar SVG
Untuk menempelkan gambar SVG, baca kembali ClipboardItem
dari papan klip, dan
dapatkan jenis yang diinginkan (yaitu, 'image/svg+xml'
dalam kasus ini) dengan
metode getType()
. Tindakan ini akan menampilkan blob yang, setelah dikonversi menjadi URL blob,
dapat ditetapkan ke atribut src
dari <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;
});
Sanitasi
SVG adalah format ampuh yang, misalnya, memungkinkan skrip yang disematkan. Hal ini dapat
berbahaya jika pengguna menempelkan konten dari sumber tidak dikenal, sehingga
browser menjalankan langkah pembersihan. Saat data disalin, Asynchronous Clipboard API
akan menghasilkan dokumen SVG yang tersusun dengan baik, lalu menulisnya ke papan klip. Saat
data ditempelkan, fragmen SVG yang diproses secara ketat akan dihasilkan oleh parser
fragmen. Oleh karena itu, sebelum operasi tempel, atribut pengendali peristiwa onclick
masih ada, tetapi setelah ditempelkan, atribut tersebut akan dihapus.
Demo
Pelajari cara menyalin dan menempel SVG dalam
demo di Glitch. Lihat
kode sumber
untuk mengetahui cara kerjanya. Pastikan untuk mencoba mengklik salah satu lingkaran sebelum dan sesudah
menyalin dan menempel. Setelah menempelkan, atribut pengendali peristiwa onclick
yang berpotensi berbahaya akan dihapus.
Link terkait
- Software produksi yang menggunakan fitur ini:
- Entri ChromeStatus
- Rencana Pengiriman
- Bug Chromium
- Posisi Standar WebKit
- Posisi Standar Mozilla
Ucapan terima kasih
Dukungan SVG untuk Asynchronous Clipboard API di Chromium telah diterapkan oleh tim Microsoft Edge. Pos ini diulas oleh Rachel Andrew dan Anupam Snigdha.