파일 처리 API를 사용하면 웹 애플리케이션이 자신을 애플리케이션에서 지원할 수 있는 파일 형식의 파일 핸들러로 등록할 수 있습니다. 이미지 편집 애플리케이션 Photopea에서 이 API를 사용하는 방법을 알아봅니다.
소개
(이 도움말은 동영상 형식으로도 제공됩니다.)
Photopea는 Ivan Kutskir이 개발한 무료 온라인 이미지 편집기입니다. 이반은 2012년에 앱 개발을 시작했으며 Photopea에 추가한 주요 기능을 공유하는 블로그를 유지합니다. Photopea는 PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD), CDR (CorelDRAW) 형식과 호환됩니다.
Photopea의 파일 처리
설치 가능한 PWA로서 Photopea는 사용자가 앱을 설치하기로 선택할 때 독립형 창에서 실행됩니다. 이렇게 하면 PWA의 초능력이 잠금 해제되어 Photopea에서 파일 처리를 많이 활용합니다.
File Handle API의 선언적 부분
설치 후 Photopea는 지원되는 여러 파일 형식의 운영체제에 파일 핸들러로 자체 등록합니다. 이 작업은 웹 앱 매니페스트에서 file_handlers 필드를 추가하여 실행합니다. 지원되는 각 파일 형식은 객체이며, action에는 값으로 상대 URL이 있으며, accept 객체는 MIME 유형 및 관련 파일 확장자의 맵입니다. 예를 들면 {"image/jpeg": [".jpeg", ".jpg"]}입니다. 다음 코드는 관련 부분이 강조 표시된 프로덕션 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 Handle API의 필수 부분
그런 다음 API의 명령적 부분은 운영 체제가 PWA로 전달하는 파일을 실제로 처리합니다. Photopea의 코드는 과도하게 최소화되고 잘못 표기되어 있지만, 그럼에도 불구하고 아래 스니펫의 요점은 그리 어렵지 않습니다. LaunchQueue 인터페이스 (N로 축소됨)에는 함수를 인수로 허용하는 setConsumer() 메서드가 있습니다. 그러면 이 함수는 LaunchParams 객체 (W로 축소됨)를 받습니다. 이 LaunchParams 객체에는 FileSystemHandle 객체의 읽기 전용 배열을 가리키는 files 속성이 있으며, 코드의 나머지 부분은 루프를 실행하여 getFile()을 호출하여 File 객체 (G로 축소됨)를 가져옵니다. 그러면 이 파일은 파일 표시를 처리하는 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년 당시에는 이 기능에 대해 전혀 상상할 수 없었지만, 2022년 초에 파일 처리 API에 열성적인 사용자가 발견하였는데, 당시에는 아직 국기로 뒤처져 있었습니다. 파일 처리는 최종적으로 Chrome 102에 출시된 기능으로, Photopea의 많은 사용자가 매일 사용하고 있어 많은 사랑을 받아 왔으며, 일부는 게임 체인저라고 부르기도 했습니다. Photopea를 사용해 보시고, 데스크톱에 설치한 다음, 지원하는 파일 형식 중 하나를 열어 보세요. 즐겁게 이미지를 수정하세요.