Async Clipboard API için web özel biçimleri

Thomas Steiner

Şimdiye kadar, Async Clipboard API'si sınırlı sayıda Sistem panosuna kopyalanıp yapıştırılacak MIME türleri, özellikle: text/plain, text/html ve image/png. Tarayıcı genellikle bunu, örneğin, yerleştirilmiş durumdaki PNG'yi önlemek için script öğeleri veya bir HTML dizesindeki javascript: bağlantıları dekompresyon bombası saldırılarıdır.

Bununla birlikte, bazı durumlarda, panodaki temizlenmemiş içeriğin desteklenmesi istenebilir:

• Uygulamanın temizleme işlemini kendisinin yaptığı durumlar.
• Kopyalanan verilerin yapıştırılan verilerle aynı olmasının önemli olduğu durumlar.

Bu tür durumlarda Async Clipboard API artık geliştiricilerin istenilen verileri panosuna yazmasına olanak tanıyan web özel biçimlerini destekliyor.

Tarayıcı desteği

Resim destekli Eş Zamansız Clipboard API'si kendi başına Chromium 76'dan itibaren desteklenmektedir. Web özel Async Clipboard API'si için biçimler, şu tarih itibarıyla masaüstünde ve mobil Chromium'da desteklenmektedir: hakkında daha fazla bilgi edinin.

Panoya web özel biçimleri yazılıyor

Panoya web özel biçimleri yazmak, temizlenmiş formatlarda yazma (ör. ifadesini blob'un MIME türünün başına "web " dizesini (sondaki boşluk dahil) ekleyin.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

Panodan web özel biçimleri okunuyor

Yazı yazmada olduğu gibi, panodan web özel biçimlerini okumak arındırılmış formatları okuma. Tek fark Uygulamanın şimdi, türü "web " ile başlayan pano öğelerini araması gerekiyor.

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

Platforma özgü uygulamalarla birlikte çalışabilirlik

web image/jpeg gibi web özel biçimleri, platforma özgü standart bir biçim değildir (image/jpeg bekleyeceklerinden) emin olmaları gerekir. Zaman içinde endişeli uygulamalar geliştiricilerin web'e yönelik destek sunması gerektiğini düşündüğü takdirde isteğe bağlı olarak bu tür biçimler için destek eklemesi bekleniyor. özel biçimlerle uyumlu hale getiriyor. İşletim sistemi panosundaki çeşitli Gördüğünüz gibi, formatlar tüketilmeye hazır birden çok biçimde mevcuttur. aşağıdaki macOS ekran görüntüsünü görebilirsiniz.

Demo

Aşağıdaki demoyu deneyebilir ve demonun nasıl çalıştığını görmek için kaynak kodu görüntüleyin.

Teşekkür

Bu makale Joe Medley tarafından incelenmiştir ve François Beaufort. Neon Tommy'nin hero resmi, bir CC BY-SA 2.0 lisansı için.