Cara aplikasi pengeditan gambar Photopea menggunakan File Handling API untuk memungkinkan pengguna membuka file dari file explorer mereka

File Handling API memungkinkan aplikasi web mendaftarkan dirinya sebagai pengendali file untuk format file yang dapat didukung aplikasi. Pelajari cara aplikasi pengeditan gambar Photopea menggunakan API ini.

Thomas Steiner
Ivan Kutskir
Ivan Kutskir
X GitHub

Pengantar

(Artikel ini juga tersedia dalam bentuk video.)

Photopea adalah editor gambar online gratis yang dikembangkan oleh Ivan Kutskir. Ivan mulai mengerjakan aplikasi ini pada tahun 2012, dan mengelola blog yang membagikan fitur-fitur utama yang ia tambahkan ke Photopea. Photopea dapat digunakan dengan format PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), dan CDR (CorelDRAW).

Aplikasi Photopea.

Penanganan file di Photopea

Sebagai PWA yang dapat diinstal, Photopea berjalan di jendela mandiri saat pengguna memilih untuk menginstal aplikasi. Tindakan ini akan membuka kemampuan super PWA, yang sangat dimanfaatkan oleh Photopea: penanganan file.

Bagian deklaratif File Handling API

Setelah diinstal, Photopea mendaftarkan dirinya sebagai pengendali file dengan sistem operasi untuk berbagai format file yang didukungnya. Hal ini terjadi di Manifes Aplikasi Web, dengan menambahkan kolom file_handlers. Setiap jenis file yang didukung adalah objek, action memiliki URL relatif sebagai nilainya, objek accept adalah peta jenis MIME dan ekstensi file terkait. Misalnya, {"image/jpeg": [".jpeg", ".jpg"]}. Kode berikut adalah Manifes Aplikasi Web Photopea produksi, dengan bagian yang relevan ditandai.

{
    "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"]
            }
          ]
        }
    }
}

Finder macOS dengan pengguna mengklik kanan file, lalu memilih 'Open with' Photopea.

Bagian imperatif dari File Handling API

Bagian imperatif API kemudian menangani file yang diteruskan sistem operasi ke PWA. Kode Photopea jelas sangat diminimalkan dan di-uglify, tetapi inti cuplikan di bawah ini tidak terlalu sulit untuk dipahami. Antarmuka LaunchQueue (diminimalkan sebagai N) memiliki metode setConsumer(), yang menerima fungsi sebagai argumen. Fungsi ini kemudian menggunakan objek LaunchParams (diminimalkan sebagai W) . Objek LaunchParams ini memiliki properti files yang mengarah ke array hanya baca dari objek FileSystemHandle, yang kemudian diulang oleh kode lainnya dan untuk setiap objek mendapatkan objek File (diminimalkan sebagai G) dengan memanggil getFile(). File ini kemudian diteruskan ke logika lain di Photopea yang menangani tampilan file.

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

Kesimpulan

Pengguna telah lama meminta agar Photopea menjadi pengendali file untuk gambar. Pada tahun 2020, saat pertanyaan muncul, fitur ini sama sekali tidak terpikirkan, tetapi pengguna yang antusias menemukan file handling API pada tahap paling awal di awal tahun 2022 saat fitur ini masih berada di balik tanda. Proses penanganan file akhirnya diluncurkan di Chrome 102 dan telah menjadi fitur Photopea yang disukai dan digunakan setiap hari oleh penggunanya, bahkan beberapa orang menyebutnya sebagai pengubah permainan. Pastikan untuk mencoba Photopea, instal di desktop Anda, lalu coba buka salah satu format file yang didukungnya. Selamat mengedit gambar.