Interfejs File Handling API umożliwia aplikacjom internetowym rejestrowanie się jako moduł obsługi plików w przypadku formatów, które obsługują. Dowiedz się, jak aplikacja do edycji zdjęć Photopea korzysta z tego interfejsu API.
Wprowadzenie
(Ten artykuł jest też dostępny w formie filmu).
Photopea to bezpłatny edytor obrazów online opracowany przez Ivana Kutskira. Ivan zaczął pracować nad aplikacją w 2012 roku i prowadzi blog, w którym informuje o głównych funkcjach dodawanych do Photopea. Photopea może pracować z formatami PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) i CDR (CorelDRAW).
Obsługa plików w Photopea
Jako aplikacja PWA do zainstalowania Photopea działa w osobnym oknie, gdy użytkownik zdecyduje się ją zainstalować. Dzięki temu można odblokować supermoc aplikacji PWA, której Photopea używa w dużym stopniu: obsługa plików.
Deklaratywna część interfejsu File Handling API
Po zainstalowaniu Photopea rejestruje się jako moduł obsługi plików w systemie operacyjnym w przypadku różnych obsługiwanych formatów plików. Aby to zrobić, w manifeście aplikacji internetowej dodaj pole file_handlers. Każdy obsługiwany typ pliku jest obiektem, a element action ma jako wartość adres URL bezwzględny, a element accept to mapa typów MIME i powiązanych rozszerzeń plików. Na przykład: {"image/jpeg": [".jpeg", ".jpg"]}. Poniższy kod to produkcyjny plik manifestu aplikacji internetowej Photopea z wyróżnionymi odpowiednimi częściami.
{
"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"]
}
]
}
}
}
Imperatywna część interfejsu File Handling API
Imperatywny element interfejsu API dotyczy faktycznego obsługiwania plików, które system operacyjny przekazuje do PWA. Kod Photopea jest oczywiście mocno zminimalizowany i niezbyt ładny, ale mimo to treść tego fragmentu kodu nie jest trudna do zrozumienia. Interfejs LaunchQueue (zminiaturyzowany jako N) zawiera metodę setConsumer(), która przyjmuje funkcję jako argument. Ta funkcja z kolei przyjmuje obiekt LaunchParams (skompresowany jako W) . Obiekt LaunchParams ma właściwość files wskazującą tablicę tylko do odczytu obiektów FileSystemHandle, która jest kolejno przetwarzana przez pozostałą część kodu. W każdym przypadku uzyskuje ona obiekt File (zminifikowany jako G) przez wywołanie funkcji getFile(). Następnie plik jest przekazywany do innej logiki w Photopea, która zajmuje się wyświetlaniem pliku.
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]);
});
}
});
}
Podsumowanie
Użytkownicy od dawna prosili, aby Photopea stała się programem do obsługi plików z obrazami. W 2020 r., gdy pojawiło się to pytanie, ta funkcja była zupełnie nie do pomyślenia, ale zawzięta użytkowniczka odkryła interfejs API do obsługi plików na samym początku, na początku 2022 r., gdy był on jeszcze w fazie testów. Obsługa plików została w końcu wprowadzona w Chrome 102 i stała się ulubioną funkcją Photopea, z której użytkownicy korzystają na co dzień. Niektórzy nawet uważają, że to funkcja zmieniająca zasady gry. Wypróbuj Photopea, zainstaluj aplikację na komputerze i spróbuj otworzyć jeden z obsługiwanych formatów plików. Życzymy miłej edycji zdjęć.