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 sayede web uygulamaları kesme, kopyalama ve yapıştırma özelliklerini uygulayabilir. read() yöntemini çağırarak verileri panodan bir uygulamaya yapıştırabilir, write() yöntemini çağırarak verileri panoya kopyalayabilirsiniz. Artık metin, Taşınabilir Ağ Grafikleri (PNG) biçimindeki resimler, temizlenmiş ve temizlememiş HTML ve Web özel biçimleri dışında SVG resimlerinin kopyalanıp yapıştırılması da Asenkron Klavye API'si tarafından desteklenmektedir. Bu sayede, SVG resimlerini metin yerine resim olarak kopyalayıp yapıştırarak veya hile amaçlı geçici çözümler kullanarak SVG'lerle çalışan resim düzenleme yazılımlarıyla daha doğal bir şekilde etkileşim kurabilirsiniz.

Özellik algılama SVG desteği

İstediğiniz MIME türünü ileterek statik ClipboardItem.supports() yöntemini çağırarak SVG resimleri (ve diğer tüm MIME türleri) için desteği algılayın.

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

SVG resmi kopyalama

ClipboardItem öğesini bir nesneyle doldurarak SVG resmi kopyalayın. SVG resim verilerini içeren blob değerdir 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

Bir SVG resmini yapıştırmak için ClipboardItem öğesini panosundan geri okuyun ve getType() yöntemiyle istediğiniz türü (bu durumda 'image/svg+xml') alın. Bu işlev, blob URL'sine dönüştürüldükten sonra bir <img> öğesinin src özelliğine atayabileceğimiz 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şik komut dosyalarına izin veren güçlü bir biçimdir. Kullanıcı bilinmeyen kaynaklardan içerik yapıştırdığında bu durum tehlikeli olabileceğinden tarayıcı bir temizleme adımı uygular. Veriler kopyalandığında Async Clipboard API, iyi biçimlendirilmiş bir SVG belgesi oluşturur ve ardından bu belgeyi panosuna yazar. Veriler yapıştırıldığında, parça ayrıştırıcısı tarafından kesinlikle işlenmiş bir SVG parçası oluşturulur. Bu nedenle, yapıştırma işleminden önce onclick etkinlik işleyici özellikleri hâlâ mevcuttur ancak yapıştırma işleminden sonra kaldırılır.

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

Demo

Glitch'teki demo'da SVG'leri kopyalama ve yapıştırma hakkında bilgi edinin. İşleyiş şeklini görmek için kaynak kodunu görüntüleyin. Kopyalama ve yapıştırma işleminden önce ve sonra dairelerden herhangi birini tıklamayı deneyin. Yapıştırma işleminden sonra, tehlikeli olabilecek onclick etkinlik işleyici özellikleri kaldırılır.

Teşekkür ederiz

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