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

File Handling API 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 hình ảnh trực tuyến miễn phí do Ivan Kutskir phát triển. Ivan bắt đầu phát triể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ể xử lý các định dạng PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) và CDR (CorelDRAW).

Ứng dụng Photopea.

Xử lý tệp trong Photopea

Là một 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ở khoá 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 sẽ tự đăng ký làm trình xử lý tệp với hệ điều hành cho các định dạng tệp mà ứng dụng này 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ó giá trị là một URL tương đối, đối tượng accept là một bản đồ các loại MIME và đuôi tệp liên quan. Ví dụ: {"image/jpeg": [".jpeg", ".jpg"]}. Đoạn mã sau đây là Tệp kê khai ứng dụng web của Photopea trong phiên bản 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"]
            }
          ]
        }
    }
}

Finder của macOS, trong đó 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ý việc thực sự xử lý (các) tệp mà hệ điều hành truyền đến PWA. Mã của Photopea rõ ràng là được giảm thiểu và làm xấu đi rất nhiều, nhưng dù sao thì nội dung chính của đoạn mã dưới đây cũng không quá khó nắm bắt. 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 lần lượt nhận một đối tượng LaunchParams (được rút gọn thành W) . Đối tượng LaunchParams này có thuộc tính files trỏ đến một mảng chỉ đọ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à lấy đối tượng File (được rút gọn thành G) cho từng đối tượng bằng cách gọi getFile(). Sau đó, tệp này được chuyển đến 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 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 đã khám phá ra API xử lý tệp ở giai đoạn sớm nhất vào đầu năm 2022 khi tính năng này vẫn còn nằm sau một cờ. Tính năng xử lý tệp cuối cùng đã được cung cấp trong Chrome 102 và là một tính năng được yêu thích của Photopea mà người dùng sử dụng hằng ngày, một số người thậm chí còn gọi đây là một tính năng thay đổi cuộc chơi. Hãy nhớ dùng thử 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 ảnh vui vẻ!