Met de File Handling API kunnen webapplicaties zichzelf registreren als bestandshandler voor bestandsformaten die de applicatie kan ondersteunen. Ontdek hoe de beeldbewerkingsapplicatie Photopea gebruik maakt van deze API.
Invoering
(Dit artikel is ook beschikbaar in de vorm van een video.)
Photopea is een gratis online afbeeldingseditor ontwikkeld door Ivan Kutskir . Ivan begon in 2012 aan de app te werken en houdt een blog bij waarin hij de belangrijkste functies deelt die hij aan Photopea toevoegt. Photopea kan werken met de formaten 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. Hierdoor wordt een PWA-superkracht ontgrendeld, waar Photopea intensief gebruik van maakt: bestandsverwerking .
Het declaratieve deel van de File Handling API
Na de installatie registreert Photopea zichzelf als bestandsverwerker bij het besturingssysteem voor de verschillende bestandsformaten 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, het accept object een overzicht van MIME-typen en bijbehorende bestandsextensies. Bijvoorbeeld {"image/jpeg": [".jpeg", ".jpg"]} . De volgende code is het productie- webapp-manifest van Photopea , waarbij de relevante onderdelen zijn 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 dwingende onderdeel van de File Handling API
Het imperatieve deel van de API behandelt vervolgens de daadwerkelijke verwerking van de bestanden die het besturingssysteem doorgeeft aan de PWA. De code van Photopea is duidelijk sterk geminimaliseerd en lelijk gemaakt, maar desalniettemin is de essentie van het onderstaande fragment niet zo moeilijk te begrijpen. De LaunchQueue interface (verkleind als N ) heeft een setConsumer() -methode, die een functie als argument accepteert. Deze functie neemt op zijn beurt een LaunchParams object (verkleind als W ). Dit LaunchParams -object heeft een eigenschap files 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 verkrijgt (verkleind als G ) door getFile() aan te roepen. Dit bestand wordt vervolgens doorgegeven aan andere logica in Photopea die ervoor zorgt dat het bestand wordt weergegeven.
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 heel lang om Photopea als bestandsbeheerder voor afbeeldingen . In 2020, toen de vraag verscheen, was deze functie volkomen ondenkbaar, maar een enthousiaste gebruiker ontdekte de API voor bestandsverwerking begin 2022 in de vroegste stadia, toen deze nog achter een vlag stond. Bestandsverwerking werd uiteindelijk geïntroduceerd in Chrome 102 en is een geliefde Photopea-functie die dagelijks door gebruikers wordt gebruikt, sommigen noemen het zelfs een gamechanger . Zorg ervoor dat u Photopea eens probeert , installeer het op uw bureaublad en probeer vervolgens een van de bestandsindelingen te openen die het ondersteunt! Veel beeldbewerking!