API Xử lý tệp cho phép ứ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 ảnh Photopea sử dụng API này.
Giới thiệu
(Bài viết này cũng có sẵn ở dạng video.)
Photopea là 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 với ứ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ể làm việc với các định dạng PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) và CDR (Coreldraw).
Xử lý tệp trong Photopea
Là một ứng dụng web tiến bộ (PWA) có thể cài đặt, Photopea sẽ 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 giúp mở khoá một siêu năng lực 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 qua hệ điều hành cho nhiều định dạng tệp mà hệ điều hành hỗ trợ. Việc 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à bản đồ các loại MIME và đuôi tệp liên kết. Ví dụ: {"image/jpeg": [".jpeg", ".jpg"]}. 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 có 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"]
}
]
}
}
}
Phần bắt buộc của API Xử lý tệp
Sau đó, phần bắt buộc của API xử lý việc xử lý trên thực tế(các) tệp mà hệ điều hành chuyển đến PWA. Rõ ràng là mã của Photopea được giảm thiểu và không được đề cập đáng kể, nhưng tuy nhiên, nội dung chính của đoạn mã dưới đây thì không quá khó để nắm bắt. Giao diện LaunchQueue (rút gọn dưới dạng N) có phương thức setConsumer() chấp nhận 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 dưới dạng W) . Đối tượng LaunchParams này có một thuộc tính files trỏ vào một mảng chỉ có thể đọc gồm các đối tượng FileSystemHandle. Phần còn lại của mã sẽ lặp lại và nhận đối tượng File (rút gọn là G) bằng cách gọi getFile(). Sau đó, tệp này được chuyển cho logic khác trong Photopea chịu trách nhiệm 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
Trong một thời gian dài, người dùng đã yêu cầu Photopea trở thành trình xử lý tệp cho hình ảnh. Năm 2020, khi câu hỏi này xuất hiện, tính năng này là hoàn toàn không tưởng, nhưng một người dùng e ngại đã phát hiện ra API xử lý tệp trong những giai đoạn đầu tiên vào đầu năm 2022 khi API này vẫn còn bị gắn cờ. Cuối cùng, chức năng xử lý tệp đã được giao trong Chrome 102 và trở thành một tính năng được yêu thích của Photopea được người dùng sử dụng hằng ngày, thậm chí một số người thậm chí còn gọi tính năng này là một yếu tố đột phá. Hãy nhớ dùng thử Photopea, cài đặt ứng dụng này trên máy tính của bạn rồi thử mở một trong các định dạng tệp mà Photopea hỗ trợ! Chúc bạn chỉnh sửa ảnh vui vẻ!