Resim düzenleme uygulaması Photopea, kullanıcıların dosyaları dosya gezgininden açmasına olanak tanımak için File processing API'yi nasıl kullanır?

File Handling API, web uygulamalarının, destekleyebilecekleri dosya biçimleri için kendilerini dosya işleyici olarak kaydetmelerine olanak tanır. Resim düzenleme uygulaması Photopea'nın bu API'yi nasıl kullandığını öğrenin.

Thomas Steiner
Ivan Kutskir
Ivan Kutskir
X GitHub

Giriş

(Bu makale video olarak da mevcuttur.)

Photopea, Ivan Kutskir tarafından geliştirilen ücretsiz bir online resim düzenleyicidir. Ivan, uygulama üzerinde çalışmaya 2012'de başladı ve Photopea'ya eklediği önemli özellikleri paylaştığı bir blog yazıyor. Photopea; PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) ve CDR (CorelDRAW) biçimleriyle çalışabilir.

Photopea uygulaması.

Photopea'da dosya işleme

Yüklenebilir bir PWA olan Photopea, kullanıcı uygulamayı yüklemeyi seçtiğinde bağımsız bir pencerede çalışır. Bu sayede, Photopea'nın yoğun bir şekilde kullandığı bir PWA süper gücü olan dosya işleme özelliği etkinleştirilir.

Dosya İşleme API'sinin bildirim temelli kısmı

Yükleme işleminden sonra Photopea, desteklediği farklı dosya biçimleri için işletim sistemine kendisini dosya işleyici olarak kaydeder. Bu işlem, Web Uygulaması Manifesti'nde file_handlers alanı eklenerek yapılır. Desteklenen her dosya türü bir nesnedir. action, değer olarak göreli bir URL'ye sahiptir. accept nesnesi, MIME türlerinin ve ilişkili dosya uzantılarının bir haritasıdır. Örneğin, {"image/jpeg": [".jpeg", ".jpg"]}. Aşağıdaki kod, Photopea'nın üretim web uygulaması manifestidir ve ilgili bölümler vurgulanmıştır.

{
    "name": "Photopea",
    "short_name": "Photopea",
    "display": "standalone",
    "icons": [
        {  "src": "promo/icon512.png",     "type": "image/png", "sizes": "512x512"  },
        {  "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable"  }
    ],
    "start_url": "/?utm_source=homescreen",
    "background_color":"#0f171d",
    "theme_color": "#474747",
    "file_handlers": [
        { "action": "/", "accept": {  "image/psd" : [ ".psd" ]  } },
        { "action": "/", "accept": {  "image/jpeg": [ ".jpeg", ".jpg" ]  } },
        { "action": "/", "accept": {  "image/png" : [ ".png" ]  } },
        { "action": "/", "accept": {  "image/webp": [ ".webp" ]  } },
        { "action": "/", "accept": {  "image/bmp" : [ ".bmp" ]  } },
        { "action": "/", "accept": {  "image/gif" : [ ".gif" ]  } },
        { "action": "/", "accept": {  "image/svg+xml": [ ".svg" ]  } },
        { "action": "/", "accept": {  "image/pdf" : [ ".pdf" ]  } },
        { "action": "/", "accept": {  "image/tiff": [ ".tif", ".tiff" ]  } },
        { "action": "/", "accept": {  "image/ai"  : [ ".ai"  ]  } },
        { "action": "/", "accept": {  "image/psb": [ ".psb" ]  } },
        { "action": "/", "accept": {  "image/xcf": [ ".xcf" ]  } },
        { "action": "/", "accept": {  "image/sketch": [ ".sketch" ]  } },
        { "action": "/", "accept": {  "image/xd" : [ ".xd"  ]  } },
        { "action": "/", "accept": {  "image/pxd": [ ".pxd" ]  } },
        { "action": "/", "accept": {  "image/cdr": [ ".cdr" ]  } },
        { "action": "/", "accept": {  "image/eps": [ ".eps", ".ps" ]  } },
        { "action": "/", "accept": {  "image/x-icon": [ ".ico" ]  } },
        { "action": "/", "accept": {  "image/jpx": [ ".jpx" ]  } },
        { "action": "/", "accept": {  "image/jp2": [ ".jp2" ]  } },
        { "action": "/", "accept": {  "image/x-tga": [ ".tga" ]  } },
        { "action": "/", "accept": {  "image/vnd-ms.dds": [ ".dds" ]  } }
    ],
    "share_target": {
        "action": "/",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "files": [
            {
                "name": "image",
                "accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
            }
          ]
        }
    }
}

Kullanıcının bir dosyayı sağ tıklayıp "Birlikte aç" Photopea'yı seçtiği macOS Finder.

Dosya İşleme API'sinin zorunlu kısmı

API'nin zorunlu kısmı, işletim sisteminin PWA'ya ilettiği dosyaları işler. Photopea'nın kodu açıkça büyük ölçüde küçültülmüş ve çirkinleştirilmiş olsa da aşağıdaki snippet'in özünü anlamak o kadar da zor değil. LaunchQueue arayüzünde (N olarak sadeleştirilmiş), bağımsız değişken olarak bir işlevi kabul eden setConsumer() yöntemi bulunur. Bu işlev de bir LaunchParams nesnesi (W olarak sadeleştirilmiş) alır. Bu LaunchParams nesnesinin, salt okunur bir FileSystemHandle nesneleri dizisine işaret eden bir files özelliği vardır. Kodun geri kalanı bu dizi üzerinde döngü oluşturur ve her biri için getFile() yöntemini çağırarak File nesnesini (G olarak sadeleştirilmiş) alır. Bu dosya daha sonra Photopea'da dosyanın görüntülenmesini sağlayan başka bir mantığa aktarılır.

var N = window.launchQueue;
if (N) {
  var $ = this.UA;
  N.setConsumer(function (W) {
    var O = W.files;
    console.log(O);
    for (var Y = 0; Y < O.length; Y++) {
      var T = O[Y];
      T.getFile().then(function (G) {
        $.YO([G], null, null, null, [T]);
      });
    }
  });
}

Sonuçlar

Kullanıcılar uzun süredir Photopea'nın resimler için dosya işleyici olmasını istiyordu. Soru 2020'de sorulduğunda bu özellik tamamen imkansızdı ancak hevesli bir kullanıcı, 2022'nin başlarında, henüz bir işaretin arkasındayken dosya işleme API'sini en erken aşamalarında keşfetti. Dosya işleme özelliği Chrome 102'de kullanıma sunuldu ve Photopea'nın sevilen bir özelliği haline geldi. Kullanıcılar bu özelliği her gün kullanıyor, hatta bazıları ezber bozan bir özellik olarak tanımlıyor. Photopea'yı deneyin, masaüstünüze yükleyin ve desteklediği dosya biçimlerinden birini açmayı deneyin. Görüntü düzenleme deneyiminizden keyif alacağınızı umuyoruz.