Dukungan SVG untuk Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Antarmuka Clipboard dari Async Clipboard API menyediakan 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 dalam 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 telah dibersihkan dan tidak dibersihkan, serta format kustom web, Async Clipboard API kini juga mendukung penyalinan dan penempelan 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 solusi sementara yang rumit.

Mendeteksi dukungan SVG fitur

Deteksi dukungan untuk gambar SVG (dan jenis MIME lainnya) dengan memanggil metode statis ClipboardItem.supports(), lalu teruskan jenis MIME yang diinginkan.

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

Menyalin gambar SVG

Salin gambar SVG dengan mengisi ClipboardItem dengan objek. Blob dengan data gambar SVG adalah nilai dan jenis blob (yaitu, 'image/svg+xml' dalam kasus ini) 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 ClipboardItem kembali 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 Anda tetapkan 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 canggih yang, misalnya, memungkinkan skrip tersemat. Hal ini dapat berbahaya saat pengguna menempelkan konten dari sumber yang tidak dikenal, sehingga browser menjalankan langkah pembersihan. Saat data disalin, Async Clipboard API menghasilkan dokumen SVG yang terbentuk dengan baik, lalu menuliskannya ke papan klip. Saat data ditempelkan, fragmen SVG yang diproses secara ketat dihasilkan oleh parser fragmen. Oleh karena itu, sebelum operasi tempel, atribut handler peristiwa onclick masih ada, tetapi setelah menempel, atribut tersebut akan dihapus.

Aplikasi Clipboard Viewer di macOS memeriksa konten papan klip. Hal ini menunjukkan bahwa atribut pemroses peristiwa onclick di SVG masih ada.
Aplikasi Clipboard Viewer di macOS memeriksa konten papan klip. Hal ini menunjukkan bahwa atribut pemroses peristiwa onclick di SVG masih ada.

Demo

Pelajari cara menyalin dan menempel SVG di demo. Lihat kode sumber untuk melihat cara kerjanya. Pastikan untuk mencoba mengklik salah satu lingkaran sebelum dan setelah menyalin dan menempel. Setelah menempelkan, atribut pengendali peristiwa onclick yang berpotensi berbahaya akan dihapus.

Ucapan terima kasih

Dukungan SVG untuk Async Clipboard API di Chromium diimplementasikan oleh tim Microsoft Edge. Postingan ini ditinjau oleh Rachel Andrew dan Anupam Snigdha.