Dukungan SVG untuk Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Antarmuka Clipboard 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 papan klip dengan memanggil metode write(). Selain teks, gambar dalam format Portable Network Graphics (PNG), HTML yang 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 hacky.

Dukungan SVG deteksi fitur

Deteksi dukungan untuk gambar SVG (dan jenis MIME lainnya) dengan memanggil metode ClipboardItem.supports() statis, yang meneruskan 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 hal 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 kembali ClipboardItem dari papan klip, dan dapatkan jenis yang diinginkan (yaitu, 'image/svg+xml' dalam hal ini) dengan metode getType(). Tindakan ini akan menampilkan blob yang, setelah dikonversi menjadi URL blob, Anda dapat menetapkan 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 yang canggih yang, misalnya, memungkinkan skrip tersemat. Hal ini dapat berbahaya jika pengguna menempelkan konten dari sumber yang tidak dikenal, sehingga browser akan menjalankan langkah pembersihan. Saat data disalin, Async Clipboard API akan menghasilkan dokumen SVG yang terbentuk 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 menempel, atribut tersebut akan dihapus.

Aplikasi Clipboard Viewer di macOS yang memeriksa konten papan klip. Ini menunjukkan bahwa atribut pemroses peristiwa onclick di SVG masih ada.
Aplikasi Clipboard Viewer di macOS yang 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 di Glitch. Lihat kode sumber untuk melihat cara kerjanya. Pastikan untuk mencoba mengklik lingkaran mana pun 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 diterapkan oleh tim Microsoft Edge. Postingan ini ditinjau oleh Rachel Andrew dan Anupam Snigdha.