Dukungan SVG untuk Async Clipboard API

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

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.

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

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.

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.