Async Clipboard API için SVG desteği

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Eş zamansız Clipboard API'sinin Clipboard arayüzü, sistem panosunun içeriğine okuma ve yazma erişimi sağlar. Bu, bir web uygulamasının kesme, kopyalama ve yapıştırma özelliklerini uygulamasına olanak tanır. read() yöntemini çağırarak panodaki verileri bir uygulamaya yapıştırabilir ve write() yöntemini çağırarak verileri panoya kopyalayabilirsiniz. Eş zamansız Clipboard API'si artık metin, Taşınabilir Ağ Grafiği (PNG) biçimindeki resimler, arındırılmış ve arındırılmamış HTML ve web özel biçimleri dışında SVG resimlerinin kopyalanıp yapıştırılmasını da destekliyor. Bu da artık SVG resimlerinin kopyalanıp yapıştırılmasını da destekliyor. Bu da son olarak SVG'leri resim olarak kopyalayıp resim olarak kullanmak yerine SVG çalışmalarını resim şeklinde kopyalayıp yapıştırarak SVG'lerle daha doğal bir şekilde etkileşime geçebileceğiniz bir resim düzenleme yazılımıyla etkileşime geçebileceğiniz anlamına geliyor.

Özellik algılama SVG desteği

Statik ClipboardItem.supports() yöntemini çağırıp istenen MIME türünü ileterek SVG resimleri (ve diğer MIME türleri) desteğini tespit edin.

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

SVG resmini kopyalama

ClipboardItem öğesini bir nesneyle doldurarak SVG resmini kopyalayın. SVG resim verilerini içeren blob, anahtar olarak değer ve blobun türü (yani 'image/svg+xml') olur.

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);
  }
});

SVG resmi yapıştırın

Bir SVG resmi yapıştırmak için panodan ClipboardItem metnini okuyun ve getType() yöntemiyle istenen türü (yani 'image/svg+xml') alın. Bu işlem, blob URL'sine dönüştürüldüğünde <img> öğesinin src özelliğine atayabileceğiniz bir blob döndürür.

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;
});

Temizleme

SVG, yerleştirilmiş komut dosyalarına izin veren güçlü bir biçimdir. Kullanıcı bilinmeyen kaynaklardan içerik yapıştırdığı için bu durum tehlikeli olabilir. Bu nedenle tarayıcı bir temizleme adımı uygular. Veriler kopyalandığında, Async Clipboard API iyi biçimlendirilmiş bir SVG belgesi oluşturur ve daha sonra bunu panoya yazar. Veriler yapıştırıldığında, parça ayrıştırıcı tarafından tam olarak işlenmiş bir SVG parçası üretilir. Bu nedenle, yapıştırma işleminden önce onclick etkinlik işleyici özellikleri hâlâ mevcuttur ancak yapıştırıldıktan sonra kaldırılır.

macOS&#39;teki Clipboard Görüntüleyici uygulaması, pano içeriklerini inceliyor. SVG&#39;deki tıklama etkinlik işleyici özelliklerinin hâlâ mevcut olduğu gösterilmektedir.
macOS'teki Pano Görüntüleyici uygulaması pano içeriklerini inceliyor. SVG'deki tıklama etkinlik işleyici özelliklerinin hâlâ mevcut olduğu gösterilmektedir.

Demo

Glitch demosunda SVG'leri kopyalayıp yapıştırmayı keşfedin. Nasıl çalıştığını görmek için kaynak kodu görüntüleyin. Kopyalayıp yapıştırma işleminden önce ve sonra herhangi bir daireyi tıklamayı mutlaka deneyin. Yapıştırma işleminden sonra, tehlikeli olabilecek onclick etkinlik işleyici özellikleri kaldırılır.

Teşekkür

Chromium'daki Async Clipboard API için SVG desteği Microsoft Edge ekibi tarafından uygulanmıştır. Bu gönderi Rachel Andrew ve Anupam Snigdha tarafından incelendi.