File Handling API ช่วยให้เว็บแอปพลิเคชันลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์สำหรับรูปแบบไฟล์ที่แอปพลิเคชันรองรับได้ ดูวิธีที่แอปพลิเคชันแก้ไขรูปภาพ Photopea ใช้ API นี้
บทนำ
(บทความนี้มีให้บริการในรูปแบบวิดีโอด้วย)
Photopea เป็นโปรแกรมแก้ไขรูปภาพออนไลน์ฟรีที่พัฒนาโดย Ivan Kutskir Ivan เริ่มพัฒนาแอปนี้ในปี 2012 และมีบล็อกที่แชร์ฟีเจอร์หลักๆ ที่เขาเพิ่มลงใน Photopea Photopea ใช้งานได้กับรูปแบบ PSD (Adobe Photoshop), XCF (GIMP), Sketch (แอป Sketch), XD (Adobe XD) และ CDR (CorelDRAW)
การจัดการไฟล์ใน Photopea
ในฐานะ PWA ที่ติดตั้งได้ Photopea จะทำงานในหน้าต่างสแตนด์อโลนเมื่อผู้ใช้เลือกติดตั้งแอป ซึ่งจะเป็นการปลดล็อกความสามารถอันยอดเยี่ยมของ PWA ซึ่ง Photopea ใช้อย่างหนัก นั่นก็คือการจัดการไฟล์
ส่วนประกาศของ File Handling API
หลังจากติดตั้งแล้ว Photopea จะลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์กับระบบปฏิบัติการสำหรับรูปแบบไฟล์ต่างๆ ที่รองรับ ซึ่งจะเกิดขึ้นใน Web App 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 ได้รับการย่อขนาดและทำให้อ่านยากมาก แต่อย่างไรก็ตาม แก่นสำคัญของข้อมูลโค้ดด้านล่างนี้เข้าใจได้ไม่ยาก อินเทอร์เฟซ 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 ฟีเจอร์นี้เป็นสิ่งที่นึกไม่ถึงเลย แต่ผู้ใช้ที่กระตือรือร้นค้นพบ File Handling API ในระยะเริ่มต้นเมื่อต้นปี 2022 เมื่อฟีเจอร์นี้ยังอยู่เบื้องหลัง Flag การจัดการไฟล์ได้เปิดตัวใน Chrome 102 และกลายเป็นฟีเจอร์ที่ผู้ใช้ Photopea ชื่นชอบและใช้งานทุกวัน บางคนถึงกับเรียกฟีเจอร์นี้ว่าเป็นผู้พลิกโฉมวงการ อย่าลืมลองใช้ Photopea โดยติดตั้งบนเดสก์ท็อป แล้วลองเปิดไฟล์รูปแบบใดรูปแบบหนึ่งที่รองรับ ขอให้สนุกกับการแก้ไขรูปภาพ