Hoe de beeldbewerkingsapp Photopea de File Handling API gebruikt om gebruikers bestanden te laten openen vanuit hun bestandsverkenner

Met de File Handling API kunnen webapplicaties zich registreren als bestandsbehandelaar voor bestandsformaten die de applicatie ondersteunt. Ontdek hoe de beeldbewerkingsapplicatie Photopea gebruikmaakt van deze API.

Thomas Steiner

Ivan Kutskir

Invoering

(Dit artikel is ook beschikbaar als video.)

Photopea is een gratis online fotobewerkingsprogramma, ontwikkeld door Ivan Kutskir . Ivan begon in 2012 met de app en onderhoudt een blog waarin hij de belangrijkste functies deelt die hij aan Photopea toevoegt. Photopea werkt met PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) en CDR (CorelDRAW).

Bestandsbeheer in Photopea

Als installeerbare PWA draait Photopea in een zelfstandig venster wanneer de gebruiker ervoor kiest de app te installeren. Dit ontgrendelt een PWA-superkracht, waar Photopea intensief gebruik van maakt: bestandsverwerking .

Het declaratieve deel van de File Handling API

Na installatie registreert Photopea zichzelf als bestandshandler bij het besturingssysteem voor de verschillende bestandsformaten die het ondersteunt. Dit gebeurt in het webapp-manifest door het veld file_handlers toe te voegen. Elk ondersteund bestandstype is een object, de action heeft een relatieve URL als waarde en het accept een overzicht van MIME-typen en bijbehorende bestandsextensies. Bijvoorbeeld: {"image/jpeg": [".jpeg", ".jpg"]} . De volgende code is het productie- webapp-manifest van Photopea , met de relevante onderdelen gemarkeerd.

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

Het onmisbare onderdeel van de File Handling API

Het imperatieve deel van de API gaat vervolgens over de daadwerkelijke verwerking van de bestanden die het besturingssysteem naar de PWA stuurt. De code van Photopea is uiteraard sterk geminimaliseerd en lelijk gemaakt, maar de kern van het onderstaande fragment is niet zo moeilijk te begrijpen. De LaunchQueue interface (verkleind als N ) heeft een setConsumer() -methode, die een functie als argument accepteert. Deze functie accepteert op zijn beurt een LaunchParams -object (verkleind als W ). Dit LaunchParams -object heeft een files -eigenschap die verwijst naar een alleen-lezen array van FileSystemHandle -objecten, waar de rest van de code vervolgens overheen loopt en voor elk object het File -object (verkleind als G ) ophaalt door getFile() aan te roepen. Dit bestand wordt vervolgens doorgegeven aan andere logica in Photopea die zorgt voor de weergave van het bestand.

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

Conclusies

Gebruikers vroegen al lang om Photopea als bestandsbehandelaar voor afbeeldingen . In 2020, toen de vraag verscheen, was deze functie volkomen ondenkbaar, maar een enthousiaste gebruiker ontdekte de API voor bestandsverwerking in de beginfase begin 2022, toen deze nog onder een vlag stond. Bestandsverwerking werd uiteindelijk meegeleverd in Chrome 102 en is een geliefde Photopea-functie die dagelijks door gebruikers wordt gebruikt. Sommigen noemen het zelfs een gamechanger . Probeer Photopea zeker eens uit , installeer het op je desktop en probeer vervolgens een van de ondersteunde bestandsformaten te openen! Veel plezier met het bewerken van afbeeldingen!