Async Clipboard API için SVG desteği

Taylore Givens
Taylore Givens
LinkedIn
Thomas Steiner

Async Clipboard API'nin 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, write() yöntemini çağırarak da verileri panoya kopyalayabilirsiniz. Async Clipboard API, metin, Portable Network Graphics (PNG) biçimindeki resimler, temizlenmiş ve temizlenmemiş HTML ile web özel biçimlerinin yanı sıra artık SVG resimlerinin kopyalanıp yapıştırılmasını da destekliyor. Bu sayede, SVG resimlerini metin olarak değil de resim olarak kopyalayıp yapıştırarak veya geçici çözümler kullanarak SVG'lerle çalışan resim düzenleme yazılımlarıyla daha doğal bir şekilde etkileşim kurabilirsiniz.

SVG desteğini algılama özelliği

İstenen MIME türünü ileterek statik ClipboardItem.supports() yöntemini çağırarak SVG resimlerinin (ve diğer MIME türlerinin) desteğini algılayın.

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

SVG resim kopyalama

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

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ırma

SVG resmini yapıştırmak için ClipboardItem öğesini panodan okuyun ve getType() yöntemiyle istediğiniz türü (bu örnekte 'image/svg+xml') alın. Bu, blob URL'sine dönüştürüldüğünde <img> öğesinin src özelliğine atanabilen 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, örneğin yerleştirilmiş komut dosyalarına izin veren güçlü bir biçimdir. Bu durum, kullanıcı bilinmeyen kaynaklardan içerik yapıştırdığında tehlikeli olabilir. Bu nedenle tarayıcı, temizleme adımı uygular. Veriler kopyalandığında Async Clipboard API, iyi biçimlendirilmiş bir SVG belgesi oluşturur ve bunu panoya yazar. Veriler yapıştırıldığında, parça ayrıştırıcı tarafından kesinlikle işlenmiş bir SVG parçası oluşturulur. Bu nedenle, yapıştırma işleminden önce onclick etkinlik işleyici özellikleri hala oradadır ancak yapıştırma işleminden sonra kaldırılır.

macOS&#39;teki Pano Görüntüleyici uygulaması, pano içeriklerini inceliyor. SVG&#39;deki onclick etkinlik işleyici özelliklerinin hâlâ orada olduğunu gösterir.
macOS'teki Pano Görüntüleyici uygulaması, pano içeriklerini inceliyor. SVG'deki onclick etkinlik işleyici özelliklerinin hâlâ orada olduğunu gösteriyor.

Demo

Demoda SVG'leri kopyalayıp yapıştırmayı deneyin. İşleyiş şeklini görmek için kaynak kodunu görüntüleyin. Kopyalayıp yapıştırmadan önce ve sonra dairelerden herhangi birini tıklamayı deneyin. Yapıştırma işleminden sonra, tehlikeli olabilecek onclick event handler özellikleri kaldırılır.

Teşekkür

Chromium'daki Async Clipboard API için SVG desteği, Microsoft Edge ekibi tarafından uygulandı. Bu yayın, Rachel Andrew ve Anupam Snigdha tarafından incelendi.