Interfejs File Handling API umożliwia aplikacjom internetowym rejestrowanie się jako moduł obsługi plików w przypadku formatów plików, które aplikacja może obsługiwać. Dowiedz się, jak aplikacja do edycji obrazów 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 bloga, na którym opisuje najważniejsze funkcje dodawane do Photopea. Photopea obsługuje formaty PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) i CDR (CorelDRAW).
Obsługa plików w aplikacji Photopea
Photopea to aplikacja PWA z możliwością zainstalowania, która działa w osobnym oknie, gdy użytkownik zdecyduje się ją zainstalować. Dzięki temu można korzystać z funkcji aplikacji PWA, którą Photopea intensywnie wykorzystuje, czyli z obsługi plików.
Deklaratywna część interfejsu obsługi pliku API
Po instalacji Photopea rejestruje się w systemie operacyjnym jako moduł obsługi plików dla różnych obsługiwanych formatów plików. Możesz to zrobić w manifeście aplikacji internetowej, dodając pole file_handlers. Każdy obsługiwany typ pliku jest obiektem, action ma jako wartość względny URL, a obiekt 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 API obsługi pliku
Imperatywna część interfejsu API zajmuje się faktyczną obsługą plików przekazywanych przez system operacyjny do PWA. Kod Photopea jest oczywiście mocno zminimalizowany i nieczytelny, ale mimo to sens poniższego fragmentu kodu nie jest trudny do zrozumienia. Interfejs LaunchQueue (zminimalizowany jako N) ma metodę setConsumer(), która akceptuje funkcję jako argument. Ta funkcja z kolei przyjmuje obiekt LaunchParams (zminimalizowany jako W) . Ten obiekt LaunchParams ma właściwość files wskazującą na tablicę obiektów FileSystemHandle tylko do odczytu, po której reszta kodu wykonuje pętlę i dla każdego z nich uzyskuje obiekt File (zminimalizowany jako G) przez wywołanie getFile(). Następnie plik jest przekazywany do innych funkcji Photopea, które odpowiadają za jego wyświetlanie.
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 to, aby Photopea stała się modułem obsługi plików graficznych. W 2020 r., gdy pojawiło się to pytanie, ta funkcja była zupełnie nie do pomyślenia, ale na początku 2022 r. jeden z użytkowników odkrył interfejs API do obsługi plików na najwcześniejszym etapie, gdy był jeszcze ukryty za flagą. Obsługa plików została ostatecznie wprowadzona w Chrome 102 i stała się ulubioną funkcją Photopea, z której użytkownicy korzystają codziennie, a niektórzy nawet nazywają ją przełomową. Wypróbuj Photopea, zainstaluj tę aplikację na komputerze i otwórz jeden z obsługiwanych przez nią formatów plików. Życzymy udanej edycji obrazów.