फ़ाइल मैनेज करने वाले एपीआई की मदद से, वेब ऐप्लिकेशन खुद को फ़ाइल हैंडलर के तौर पर रजिस्टर कर सकते हैं. ऐसा उन फ़ाइल फ़ॉर्मैट के लिए किया जा सकता है जो ऐप्लिकेशन के साथ काम करते हैं. जानें कि इमेज में बदलाव करने वाला ऐप्लिकेशन Photopea, इस एपीआई का इस्तेमाल कैसे करता है.
परिचय
(यह लेख, वीडियो के तौर पर भी उपलब्ध है.)
Photopea, इमेज में बदलाव करने वाला एक मुफ़्त ऑनलाइन टूल है. इसे इवान कुत्स्कीर ने डेवलप किया है. इवान ने 2012 में इस ऐप्लिकेशन पर काम करना शुरू किया था. वे एक ब्लॉग भी चलाते हैं, जिसमें वे Photopea में जोड़ी गई मुख्य सुविधाओं के बारे में बताते हैं. Photopea, PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), और CDR (CorelDRAW) फ़ॉर्मैट के साथ काम कर सकता है.
Photopea में फ़ाइल मैनेज करना
इंस्टॉल किए जा सकने वाले PWA के तौर पर, Photopea एक स्टैंडअलोन विंडो में चलता है. ऐसा तब होता है, जब उपयोगकर्ता ऐप्लिकेशन को इंस्टॉल करने का विकल्प चुनता है. ऐसा करने से, PWA की एक बेहतरीन सुविधा अनलॉक हो जाती है. Photopea इसका भरपूर इस्तेमाल करता है: फ़ाइल मैनेज करना.
फ़ाइल मैनेज करने वाले एपीआई का डिक्लेरेटिव हिस्सा
इंस्टॉल होने के बाद, Photopea खुद को ऑपरेटिंग सिस्टम के साथ फ़ाइल हैंडलर के तौर पर रजिस्टर करता है. ऐसा वह उन अलग-अलग फ़ाइल फ़ॉर्मैट के लिए करता है जो वह इस्तेमाल कर सकता है. ऐसा वेब ऐप्लिकेशन मेनिफ़ेस्ट में, file_handlers फ़ील्ड जोड़कर किया जाता है. इस्तेमाल किया जा सकने वाला हर फ़ाइल टाइप एक ऑब्जेक्ट होता है. action की वैल्यू के तौर पर रिलेटिव यूआरएल होता है. accept ऑब्जेक्ट, एमआईएमई टाइप और उनसे जुड़े फ़ाइल एक्सटेंशन का मैप होता है. उदाहरण के लिए, {"image/jpeg": [".jpeg", ".jpg"]}. यहां दिया गया कोड, Photopea का प्रोडक्शन वेब ऐप्लिकेशन मेनिफ़ेस्ट है. इसमें काम के हिस्सों को हाइलाइट किया गया है.
{
"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"]
}
]
}
}
}
फ़ाइल मैनेज करने वाले एपीआई का ज़रूरी हिस्सा
इसके बाद, एपीआई का ज़रूरी हिस्सा उन फ़ाइलों को मैनेज करता है जिन्हें ऑपरेटिंग सिस्टम, पीडब्ल्यूए को पास करता है. Photopea के कोड को साफ़ तौर पर छोटा और खराब किया गया है. हालांकि, नीचे दिए गए स्निपेट का सार समझना इतना मुश्किल नहीं है. LaunchQueue इंटरफ़ेस (N के तौर पर छोटा किया गया) में setConsumer() तरीका होता है. यह किसी फ़ंक्शन को आर्ग्युमेंट के तौर पर स्वीकार करता है. यह फ़ंक्शन, LaunchParams ऑब्जेक्ट (W के तौर पर छोटा किया गया) लेता है. इस LaunchParams ऑब्जेक्ट में एक files प्रॉपर्टी होती है, जो FileSystemHandle ऑब्जेक्ट के रीड-ओनली कलेक्शन पर ले जाती है. इसके बाद, बाकी कोड लूप करता है और हर एक के लिए, getFile() को कॉल करके File ऑब्जेक्ट (G के तौर पर छोटा किया गया) हासिल करता है. इसके बाद, इस फ़ाइल को Photopea में मौजूद अन्य लॉजिक को पास किया जाता है, जो फ़ाइल को दिखाने का काम करता है.
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]);
});
}
});
}
मीटिंग में सामने आए नतीजे
उपयोगकर्ता लंबे समय से Photopea को इमेज के लिए फ़ाइल हैंडलर बनाने की मांग कर रहे हैं. साल 2020 में, जब यह सवाल पूछा गया था, तब इस सुविधा के बारे में सोचा भी नहीं जा सकता था. हालांकि, साल 2022 की शुरुआत में, एक उपयोगकर्ता ने फ़ाइल मैनेज करने वाले एपीआई को खोज निकाला. उस समय यह एपीआई अपने शुरुआती दौर में था और इसे फ़्लैग के पीछे छिपाकर रखा गया था. फ़ाइल मैनेज करने की सुविधा को आखिरकार Chrome 102 में लॉन्च किया गया. यह Photopea की एक लोकप्रिय सुविधा है, जिसका इस्तेमाल इसके उपयोगकर्ता रोज़ाना करते हैं. कुछ लोग तो इसे गेमचेंजर भी कहते हैं. Photopea को ज़रूर आज़माएं. इसे अपने डेस्कटॉप पर इंस्टॉल करें. इसके बाद, इसमें काम करने वाले किसी फ़ाइल फ़ॉर्मैट को खोलने की कोशिश करें! इमेज में बदलाव करने का आनंद लें!