Met de File Handling API kunnen web-apps zichzelf registreren als bestandsverwerker voor bestandsindelingen die de app ondersteunt. Ontdek hoe de app voor fotobewerking Photopea deze API gebruikt.
Inleiding
(Dit artikel is ook beschikbaar als video.)
Photopea is een kosteloze online afbeeldingseditor die is ontwikkeld door Ivan Kutskir. Ivan begon in 2012 met de ontwikkeling van de app en houdt een blog bij waarin hij de belangrijkste functies deelt die hij aan Photopea toevoegt. Photopea werkt met de indelingen PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) en CDR (CorelDRAW).
Bestandsverwerking in Photopea
Als installeerbare PWA wordt Photopea uitgevoerd in een zelfstandig venster als de gebruiker ervoor kiest de app te installeren. Zo wordt een superkracht van PWA's ontgrendeld, waar Photopea veel gebruik van maakt: bestandsverwerking.
Het declaratieve deel van de API voor bestandsverwerking
Na de installatie registreert Photopea zichzelf als bestandsverwerker bij het besturingssysteem voor de verschillende bestandsindelingen die het ondersteunt. Dit gebeurt in het web-app-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 object accept is een toewijzing van MIME-typen en bijbehorende bestandsextensies. Bijvoorbeeld {"image/jpeg": [".jpeg", ".jpg"]}. De volgende code is het productie-web-app-manifest van Photopea, met de relevante delen 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 imperatieve deel van de API voor bestandsverwerking
Het imperatieve deel van de API verwerkt daarna de bestanden die het besturingssysteem doorgeeft aan de PWA. De code van Photopea is natuurlijk sterk geminimaliseerd en onleesbaar gemaakt, maar de essentie 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 gebruikt op zijn beurt een LaunchParams-object (verkleind als W) . Dit LaunchParams-object heeft een files-property die verwijst naar een alleen-lezen matrix van FileSystemHandle-objecten. De rest van de code doorloopt deze matrix en haalt voor elk object het File-object (verkleind als G) op door getFile() aan te roepen. Dit bestand wordt dan doorgegeven aan andere logica in Photopea die het bestand weergeeft.
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 vragen al lang om Photopea een bestandsverwerker voor afbeeldingen te maken. In 2020, toen de vraag werd gesteld, was deze functie nog ondenkbaar, maar een enthousiaste gebruiker ontdekte de API voor bestandsverwerking in de vroegste fasen begin 2022, toen deze nog achter een vlag stond. Bestandsverwerking werd uiteindelijk geleverd in Chrome 102 en is een geliefde Photopea-functie die dagelijks door gebruikers wordt gebruikt. Sommigen noemen het zelfs een gamechanger. Probeer Photopea, installeer het op je desktop en probeer een van de ondersteunde bestandsindelingen te openen. Veel plezier met het bewerken van je afbeeldingen!