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. Iwan zaczął pracę nad aplikacją w 2012 roku i prowadzi bloga, na którym dzieli się najważniejszymi funkcjami, które dodał do aplikacji 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 dla 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żej znajduje się kod produkcyjny pliku 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 obsługi 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) . Ten obiekt LaunchParams ma właściwość files wskazującą tablicę tylko do odczytu obiektów FileSystemHandle. Pozostała część kodu jest następnie zapętlona, aby w przypadku każdego z nich uzyskać obiekt File (zminimalizowany do G) przez wywołanie 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 o Fotopea jako moduł obsługi plików zdjęć. 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ę jedną z ulubionych funkcji Photopea, z której użytkownicy korzystają na co dzień. Niektórzy nawet uważają, że to funkcja zmieniająca zasady gry. Wypróbuj aplikację Photopea, zainstaluj ją na komputerze, a potem spróbuj otworzyć jeden z obsługiwanych formatów plików. Powodzenia w edytowaniu obrazów!