File işleme API'sı, web uygulamalarının, destekleyebileceği dosya biçimleri için kendilerini dosya işleyici olarak kaydetmelerine olanak sağlar. Resim düzenleme uygulamasının Photopea'nın bu API'den nasıl yararlandığını öğrenin.
Giriş
(Bu makale video biçiminde de mevcuttur.)
Photopea, Ivan Kutskir tarafından geliştirilen ücretsiz bir çevrimiçi resim düzenleyicidir. Uygulama üzerinde çalışmaya 2012'de başlayan Ivan, Photopea'ya eklediği temel özellikleri paylaştığı bir blog düzenliyor. Photopea PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), 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. Böylece, Photopea bir PWA süper gücünü ortaya çıkarır ve Photopea bu dosya işlemeyi yoğun bir şekilde kullanır.
File Process API'nin bildirim temelli bölümü
Yükleme sonrasında Photopea, desteklediği farklı dosya biçimleri için işletim sisteminde kendisini bir dosya işleyici olarak kaydeder. Bu işlem, Web Uygulaması Manifest'inde file_handlers alanı eklenerek yapılır. Desteklenen her dosya türü bir nesnedir. action öğesinin değeri olarak göreli bir URL, accept nesnesi ise MIME türlerinin ve ilişkili dosya uzantılarının eşleştirmesini içerir. Örneğin, {"image/jpeg": [".jpeg", ".jpg"]}. Aşağıdaki kod, ilgili bölümler vurgulanmış şekilde, Photopea'nın Web Uygulaması Manifest'inin üretim sürümüdür.
{
"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 Process API'nin zorunlu kısmı
Ardından, API'nin zorunlu kısmı işletim sisteminin PWA'ya ilettiği dosyaların fiilen işlenmesiyle ilgilenir. Photopea'nın kodu büyük ölçüde küçültülmüş ve sadeleştirilmiştir. Yine de aşağıdaki snippet'in ana fikrini anlamak o kadar zor değildir. LaunchQueue arayüzünde (N olarak kısaltılmış), işlevi bağımsız değişken olarak kabul eden bir setConsumer() yöntemi bulunur. Buna karşılık, bu işlev bir LaunchParams nesnesi (W olarak küçültülmüş) alır. Bu LaunchParams nesnesi, FileSystemHandle nesnelerinden oluşan salt okunur bir diziyi işaret eden bir files özelliğine sahiptir. Kodun geri kalanı daha sonra döngü oluşturur ve her bir öğe için getFile() çağrısı yaparak File nesnesini (G olarak küçültülür) elde eder. Daha sonra bu dosya, Photopea'da dosyanın görüntülenmesiyle ilgili başka bir mantığa aktarılır.
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
Kullanıcılar uzun süredir Fotopea'nın resimler için dosya işleyici olmasını istiyorlar. 2020'de bu soru ortaya çıktığında bu özellik tamamen düşünülemezdi. Ancak dosya işleme API'sini hevesli bir kullanıcı, 2022'nin başlarında hâlâ bir bayrak arkasındayken ilk aşamalarında keşfetti. Dosya işleme özelliği nihayet Chrome 102'de kullanıma sunuldu ve kullanıcıları tarafından günlük olarak kullanılan popüler bir Photopea özelliği. Hatta bazıları, bu özelliğin çığır açıcı olduğunu söylüyor. Photopea'yı mutlaka deneyin, masaüstünüze yükleyin ve ardından desteklediği dosya biçimlerinden birini açmayı deneyin! İyi resim düzenleme işlemleri!