วิธีที่แอปแก้ไขรูปภาพ Photopea ใช้ File Handling API เพื่อให้ผู้ใช้เปิดไฟล์จากเครื่องมือสำรวจไฟล์ของตนเองได้

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

การจัดการไฟล์ใน Photopea

ในฐานะ PWA ที่ติดตั้งได้ Photopea จะทำงานในหน้าต่างสแตนด์อโลนเมื่อผู้ใช้เลือกติดตั้งแอป ซึ่งจะเป็นการปลดล็อกความสามารถอันยอดเยี่ยมของ 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"]
            }
          ]
        }
    }
}

Finder ของ macOS ที่มีผู้ใช้คลิกขวาที่ไฟล์แล้วเลือก "เปิดด้วย" Photopea

ส่วนบังคับของ 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 โดยติดตั้งบนเดสก์ท็อปของคุณ จากนั้นลองเปิดไฟล์ในรูปแบบที่ระบบรองรับ ขอให้สนุกกับการแก้ไขรูปภาพ