Cách ứng dụng chỉnh sửa hình ảnh Photopea sử dụng API Xử lý tệp để cho phép người dùng mở tệp từ trình khám phá tệp

API Xử lý tệp cho phép các ứng dụng web tự đăng ký làm trình xử lý tệp cho các định dạng tệp mà ứng dụng có thể hỗ trợ. Tìm hiểu cách ứng dụng chỉnh sửa hình ảnh Photopea sử dụng API này.

Giới thiệu

(Bài viết này cũng có dạng video.)

Photopea là một trình chỉnh sửa ảnh trực tuyến miễn phí do Ivan Kutskir phát triển. Ivan bắt đầu làm việc trên ứng dụng này vào năm 2012 và duy trì một blog để chia sẻ các tính năng chính mà anh thêm vào Photopea. Photopea có thể hoạt động với các định dạng PSD (Adobe Photoshop), XCF (GIMP), Sketch (Ứng dụng Sketch), XD (Adobe XD) và CDR (CorelDRAW).

Ứng dụng Photopea.

Xử lý tệp trong Photopea

Là một ứng dụng web tiến bộ (PWA) có thể cài đặt, Photopea chạy trong một cửa sổ độc lập khi người dùng chọn cài đặt ứng dụng. Việc này sẽ mở ra một tính năng siêu mạnh của PWA mà Photopea sử dụng rất nhiều: xử lý tệp.

Phần khai báo của API Xử lý tệp

Sau khi cài đặt, Photopea tự đăng ký làm trình xử lý tệp với hệ điều hành cho nhiều định dạng tệp mà hệ điều hành hỗ trợ. Điều này xảy ra trong Tệp kê khai ứng dụng web, bằng cách thêm trường file_handlers. Mỗi loại tệp được hỗ trợ là một đối tượng, action có một URL tương đối làm giá trị, đối tượng accept là một bản đồ của các loại MIME và các đuôi tệp liên quan. Ví dụ: {"image/jpeg": [".jpeg", ".jpg"]}. Mã sau đây là Tệp kê khai ứng dụng web của Photopea chính thức, trong đó các phần liên quan được làm nổi bật.

{
    "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"]
            }
          ]
        }
    }
}

Trình tìm kiếm macOS với người dùng nhấp chuột phải vào một tệp rồi chọn "Mở bằng" Photopea.

Phần bắt buộc của API Xử lý tệp

Sau đó, phần bắt buộc của API sẽ xử lý(các) tệp mà hệ điều hành chuyển đến PWA. của Photopea rõ ràng đã được rút gọn và làm xấu đi rất nhiều, nhưng dù sao thì bạn cũng không khó để nắm bắt được ý chính của đoạn mã bên dưới. Giao diện LaunchQueue (được rút gọn thành N) có phương thức setConsumer(), chấp nhận một hàm làm đối số. Hàm này sẽ lấy một đối tượng LaunchParams (rút gọn là W) . Đối tượng LaunchParams này có thuộc tính files trỏ đến một mảng chỉ có thể đọc gồm các đối tượng FileSystemHandle, sau đó phần còn lại của mã sẽ lặp lại và cho mỗi đối tượng lấy đối tượng File (rút gọn thành G) bằng cách gọi getFile(). Sau đó, tệp này được chuyển sang logic khác trong Photopea để xử lý việc hiển thị tệp.

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]);
      });
    }
  });
}

Kết luận

Người dùng đã yêu cầu Photopea trở thành trình xử lý tệp cho hình ảnh từ lâu. Vào năm 2020, khi câu hỏi này xuất hiện, tính năng này hoàn toàn không thể tưởng tượng được, nhưng một người dùng háo hức đã phát hiện ra API xử lý tệp ở giai đoạn đầu tiên vào đầu năm 2022 khi API này vẫn còn bị ẩn sau một cờ. Cuối cùng, tính năng xử lý tệp đã được cung cấp trong Chrome 102 và trở thành một tính năng được người dùng Photopea yêu thích, sử dụng hằng ngày. Thậm chí, một số người dùng còn gọi tính năng này là một yếu tố thay đổi cuộc chơi. Hãy nhớ thử dùng Photopea, cài đặt ứng dụng này trên máy tính rồi thử mở một trong các định dạng tệp mà ứng dụng này hỗ trợ! Chúc bạn chỉnh sửa hình ảnh vui vẻ!