File Handling API ช่วยให้เว็บแอปพลิเคชันลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์สำหรับรูปแบบไฟล์ที่แอปพลิเคชันสามารถรองรับ ดูวิธีที่แอปพลิเคชันแก้ไขรูปภาพ Photopea ใช้ประโยชน์จาก API นี้
เกริ่นนำ
(บทความนี้ยังมีรูปแบบวิดีโออีกด้วย)
Photopea เป็นโปรแกรมตกแต่งภาพออนไลน์ฟรีที่พัฒนาโดย Ivan Kutskir ธวัชเริ่มทำงานด้านแอปในปี 2012 และรักษาบล็อกที่แชร์ฟีเจอร์หลักๆ ที่เขาเพิ่มลงใน Photopea Photopea สามารถทำงานกับรูปแบบ PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) และ CDR (CorelDRAW) ได้
การจัดการไฟล์ใน Photopea
เนื่องจาก Photopea เป็น PWA ที่ติดตั้งได้ จึงทำงานในหน้าต่างแบบสแตนด์อโลนเมื่อผู้ใช้เลือกที่จะติดตั้งแอป ซึ่งจะเป็นการปลดล็อก Super Power ของ PWA ซึ่ง Photopea จะใช้งานการจัดการไฟล์เป็นหลัก
ส่วนที่ประกาศของ File Handling API
หลังจากติดตั้งแล้ว Photopea จะลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์โดยใช้ระบบปฏิบัติการสำหรับรูปแบบไฟล์ต่างๆ ที่รองรับ กรณีนี้จะเกิดขึ้นในไฟล์ Manifest ของเว็บแอปด้วยการเพิ่มช่อง file_handlers ไฟล์ที่รองรับแต่ละประเภทจะเป็นออบเจ็กต์ ส่วน action จะมี URL สัมพัทธ์เป็นค่า ส่วนออบเจ็กต์ accept จะเป็นแมปประเภท MIME และนามสกุลไฟล์ที่เกี่ยวข้อง เช่น {"image/jpeg": [".jpeg", ".jpg"]} โค้ดต่อไปนี้คือไฟล์ Manifest ของเว็บแอปของ 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"]
}
]
}
}
}
ส่วนสำคัญของ File Handling API
จากนั้นส่วนที่จำเป็นของ API จะจัดการกับไฟล์ที่ระบบปฏิบัติการส่งผ่านไปยัง PWA โค้ดของ Photopea มีการย่อขนาดและขยายเป็น URL ไม่มากอย่างชัดเจน แต่ถึงกระนั้นข้อมูลใจความของตัวอย่างข้อมูลด้านล่างก็ยากที่จะทำความเข้าใจ อินเทอร์เฟซ LaunchQueue (ย่อเป็น N) มีเมธอด setConsumer() ที่ยอมรับฟังก์ชันเป็นอาร์กิวเมนต์ ฟังก์ชันนี้ก็จะรับออบเจ็กต์ LaunchParams (ย่อเป็น W) ออบเจ็กต์ LaunchParams นี้มีพร็อพเพอร์ตี้ files ที่ชี้ไปยังอาร์เรย์แบบอ่านอย่างเดียวของออบเจ็กต์ FileSystemHandle ซึ่งโค้ดที่เหลือจะวนซ้ำ และแต่ละโค้ดจะได้รับออบเจ็กต์ File (ย่อเป็น G) โดยเรียกใช้ getFile() แล้วส่งต่อไฟล์นี้ไปยังตรรกะอื่นๆ ใน 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 เมื่อมีคำถามนี้ ก็ไม่มีใครคาดคิดเลยว่าจะใช้ฟีเจอร์นี้ได้ แต่ผู้ใช้ไฟแรงได้ค้นพบ API การจัดการไฟล์ตั้งแต่ช่วงแรกสุดในช่วงต้นปี 2022 ที่ยังคงอยู่หลัง Flag ในที่สุดการจัดการไฟล์ก็จัดส่งใน Chrome 102 และเป็นฟีเจอร์ยอดนิยมของ Photopea ที่ผู้ใช้ใช้กันทุกวัน บางคนถึงขั้นเรียกว่าเป็นเกมเปลี่ยนโฉมเลยด้วยซ้ำ อย่าลืมลองใช้ Photopea ติดตั้งบนเดสก์ท็อป จากนั้นลองเปิดไฟล์รูปแบบใดรูปแบบหนึ่งที่โปรแกรมรองรับ ขอให้สนุกกับการแก้ไขรูปภาพ