Wie die Bildbearbeitungs-App Photopea die File Handling API nutzt, damit Nutzer Dateien über ihren Datei-Explorer öffnen können

Mit der Dateiverwaltungs-API können sich Webanwendungen als Dateihandler für Dateiformate registrieren, die von der Anwendung unterstützt werden. Hier erfahren Sie, wie die Bildbearbeitungsanwendung Photopea diese API verwendet.

Thomas Steiner

Ivan Kutskir

Einführung

(Dieser Artikel ist auch als Video verfügbar.)

Photopea ist ein kostenloser Online-Bildeditor, der von Ivan Kutskir entwickelt wurde. Ivan begann 2012 mit der Arbeit an der App und führt einen Blog, in dem er die wichtigsten Funktionen vorstellt, die er Photopea hinzufügt. Photopea kann mit den Formaten PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) und CDR (CorelDRAW) verwendet werden.

Dateiverwaltung in Photopea

Als installierbare PWA wird Photopea in einem eigenständigen Fenster ausgeführt, wenn der Nutzer die App installiert. Dadurch wird eine PWA-Superkraft freigeschaltet, die Photopea intensiv nutzt: die Dateiverwaltung.

Der deklarative Teil der Dateiverwaltung-API

Nach der Installation registriert sich Photopea beim Betriebssystem als Dateihandler für die verschiedenen unterstützten Dateiformate. Dazu wird im Web-App-Manifest das Feld file_handlers hinzugefügt. Jeder unterstützte Dateityp ist ein Objekt. action hat eine relative URL als Wert, das Objekt accept eine Zuordnung von MIME-Typen und zugehörigen Dateiendungen. Beispiel: {"image/jpeg": [".jpeg", ".jpg"]}. Der folgende Code ist das Web-App-Manifest von Photopea für die Produktion, wobei die relevanten Teile hervorgehoben sind.

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

Der imperative Teil der Dateiverwaltung-API

Der imperative Teil der API befasst sich dann mit der tatsächlichen Verarbeitung der Dateien, die das Betriebssystem an die PWA übergibt. Der Code von Photopea ist natürlich stark minimiert und unleserlich gemacht, aber der Kern des folgenden Snippets ist dennoch nicht so schwer zu verstehen. Die Schnittstelle LaunchQueue (minimiert als N) hat eine setConsumer()-Methode, die eine Funktion als Argument akzeptiert. Diese Funktion wiederum verwendet ein LaunchParams-Objekt (minimiert als W) . Dieses LaunchParams-Objekt hat ein files-Attribut, das auf ein Array mit Lesezugriff von FileSystemHandle-Objekten verweist. Der restliche Code durchläuft dieses Array und ruft für jedes Objekt das File-Objekt (minimiert als G) auf, indem getFile() aufgerufen wird. Diese Datei wird dann an eine andere Logik in Photopea übergeben, die für die Anzeige der Datei sorgt.

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

Zusammenfassung

Nutzer haben schon lange danach gefragt, dass Photopea als Dateihandler für Bilder verwendet werden kann. Im Jahr 2020, als die Frage gestellt wurde, war diese Funktion noch völlig undenkbar. Ein begeisterter Nutzer entdeckte die Dateiverwaltungs-API jedoch Anfang 2022 in ihrer frühesten Phase, als sie noch hinter einem Flag verborgen war. Die Dateiverwaltung wurde schließlich in Chrome 102 eingeführt und ist eine beliebte Photopea-Funktion, die von den Nutzern täglich verwendet wird. Einige bezeichnen sie sogar als bahnbrechend. Probieren Sie Photopea aus, installieren Sie es auf Ihrem Computer und öffnen Sie dann eines der unterstützten Dateiformate. Viel Spaß beim Bearbeiten Ihrer Bilder!