File Handling API, web uygulamalarının kendilerini destekleyebilecekleri dosya biçimleri için dosya işleyici olarak kaydetmelerine olanak tanır. Photopea resim düzenleme uygulamasının bu API'yi nasıl kullandığını öğrenin.
Giriş
(Bu makaleyi video olarak da inceleyebilirsiniz.)
Photopea, Ivan Kutskir tarafından geliştirilen ücretsiz bir online resim düzenleyicidir. Ivan, uygulama üzerinde 2012'de çalışmaya başladı ve Photopea'ya eklediği önemli özellikleri paylaştığı bir blog'u yönetiyor. Photopea; PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch Uygulaması), XD (Adobe XD) ve CDR (CorelDRAW) biçimleriyle çalışabilir.
Photopea'da dosya işleme
Yüklenebilir bir PWA olarak Photopea, kullanıcı uygulamayı yüklemeyi seçtiğinde bağımsız bir pencerede çalışır. Bu sayede Photopea'nın yoğun olarak kullandığı bir PWA süper gücünün kilidi açılır: dosya işleme.
File Handling API'nin açıklayıcı kısmı
Photopea, yüklendikten sonra desteklediği farklı dosya biçimleri için işletim sistemine dosya işleyici olarak kaydedilir. Bu işlem, Web Uygulama Manifesti'ne file_handlers alanı eklenerek yapılır. Desteklenen her dosya türü bir nesnedir. action değeri göreli bir URL'ye, accept nesnesi ise MIME türlerinin ve ilişkili dosya uzantılarının haritasına sahiptir. Örneğin, {"image/jpeg": [".jpeg", ".jpg"]}. Aşağıdaki kod, ilgili bölümlerin vurgulandığı Photopea'nın üretim Web Uygulaması Manifest'idir.
{
"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"]
}
]
}
}
}
File Handling API'nin zorunlu kısmı
Daha sonra API'nin zorunlu kısmı, işletim sisteminin PWA'ya aktardığı dosyaların gerçekten işlenmesiyle ilgilenir. Photopea'nın kodu açıkça çok fazla küçültülmüş ve çirkinleştirilmiş olsa da aşağıdaki snippet'in ana fikrini kavramak o kadar da zor değil. LaunchQueue arayüzünde (N olarak küçültülmüştür), bağımsız değişken olarak işlev kabul eden bir setConsumer() yöntemi vardır. Bu işlev de bir LaunchParams nesnesi (W olarak küçültülmüş) alır. Bu LaunchParams nesnesinin, salt okunur bir FileSystemHandle nesnesi dizisini işaret eden bir files mülkü vardır. Kodun geri kalanı bu diziyi döngüden geçirir ve her birinde getFile() çağrısı yaparak File nesnesini (G olarak küçültülür) alır. Bu dosya daha sonra Photopea'da dosyayı görüntüleyen diğer mantığa iletilir.
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]);
});
}
});
}
Sonuçlar
Photopea'nın resim dosyası işleyicisi olmasını kullanıcılardan uzun süredir istiyorduk. Soru 2020'de ortaya çıktığında bu özellik tamamen düşünülemezdi ancak hevesli bir kullanıcı, dosya işleme API'sini 2022'nin başlarında henüz işaretliyken ilk aşamalarında keşfetti. Dosya işleme özelliği Chrome 102'de kullanıma sunuldu ve kullanıcılar tarafından günlük olarak kullanılan sevilen bir Photopea özelliği haline geldi. Hatta bazı kullanıcılar oyunu değiştiren bir özellik olarak nitelendiriyor. Photopea'yı deneyin, masaüstünüze yükleyin ve desteklediği dosya biçimlerinden birini açmayı deneyin! İyi eğlenceler dileriz.