Mit dem File Handling API können sich Webanwendungen als Datei-Handler für Dateiformate registrieren, die von der Anwendung unterstützt werden. Erfahren Sie, wie die Bildbearbeitungsanwendung Photopea diese API nutzt.
Einführung
(Dieser Artikel ist auch in Form eines Videos verfügbar.)
Photopea ist ein kostenloser Online-Bildeditor, der von Ivan Kutskir entwickelt wurde. Iwan begann 2012 mit der Arbeit an der App und unterhält einen Blog, in dem er die wichtigsten Funktionen teilt, die er zu Photopea hinzufügt. Photopea kann mit den Formaten PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) und CDR (CorelDRAW) verwendet werden.
Dateiverarbeitung in Photopea
Als installierbare PWA wird Photopea in einem eigenständigen Fenster ausgeführt, wenn der Nutzer die App installieren möchte. Dadurch wird eine PWA-Superpower aktiviert, die Photopea intensiv nutzt: Dateiverarbeitung.
Der deklarative Teil der File Handling API
Nach der Installation registriert sich Photopea beim Betriebssystem für die verschiedenen unterstützten Dateiformate als Datei-Handler. Dazu muss im Web App Manifest das Feld file_handlers hinzugefügt werden. Jeder unterstützte Dateityp ist ein Objekt, das action hat eine relative URL als Wert, das accept-Objekt eine Zuordnung von MIME-Typen und zugehörigen Dateiendungen. Beispiel: {"image/jpeg": [".jpeg", ".jpg"]}. Der folgende Code ist das Produktions-Web App Manifest of Photopea, 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 unverzichtbare Teil der File Handling API
Der erforderliche Teil der API kümmert sich dann um die tatsächliche Verarbeitung der Dateien, die das Betriebssystem an die PWA übergibt. Der Code von Photopea ist offensichtlich minimal und uglifiziert, aber dennoch ist der Kern des Snippets unten nicht so schwer zu verstehen. Die Schnittstelle LaunchQueue (minimiert als N) hat eine setConsumer()-Methode, die eine Funktion als Argument akzeptiert. Diese Funktion verwendet wiederum ein LaunchParams-Objekt (minimiert als W) . Dieses LaunchParams-Objekt hat eine files-Eigenschaft, die auf ein schreibgeschütztes Array von FileSystemHandle-Objekten verweist. Der Rest des Codes wird dann in einer Schleife durchlaufen. Für jedes Objekt wird durch Aufrufen von getFile() das File-Objekt abgerufen (minimiert als G). Diese Datei wird dann an eine andere Logik in Photopea übergeben, die die Anzeige der Datei übernimmt.
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]);
});
}
});
}
Ergebnisse
Schon seit Langem fordern Nutzer Photopea als Datei-Handler für Bilder an. Als im Jahr 2020 die Frage auftrat, war diese Funktion völlig undenkbar. Ein interessierter Nutzer entdeckte die API zur Dateiverarbeitung jedoch Anfang 2022, als sie sich noch hinter einer Markierung befand. Die Dateiverwaltung wurde schließlich in Chrome 102 eingeführt und war eine beliebte Photopea-Funktion, die täglich von den Nutzern verwendet wird, die sogar als Gamechanger bezeichnet werden. Probieren Sie Photopea aus, installieren Sie es auf Ihrem Desktop und öffnen Sie dann eines der unterstützten Dateiformate. Viel Spaß bei der Bildbearbeitung!