File Handling API를 사용하면 웹 애플리케이션이 애플리케이션에서 지원할 수 있는 파일 형식의 파일 핸들러로 등록할 수 있습니다. 이미지 편집 애플리케이션 Photopea에서 이 API를 사용하는 방법을 알아보세요.
소개
이 도움말은 동영상으로도 제공됩니다.
Photopea는 이반 쿠츠키르가 개발한 무료 온라인 이미지 편집기입니다. 이반은 2012년에 앱 개발을 시작했으며 Photopea에 추가한 주요 기능을 공유하는 블로그를 운영하고 있습니다. Photopea는 PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch 앱), XD (Adobe XD), CDR (CorelDRAW) 형식을 사용할 수 있습니다.
Photopea의 파일 처리
설치 가능한 PWA인 Photopea는 사용자가 앱 설치를 선택하면 독립형 창에서 실행됩니다. 이렇게 하면 Photopea에서 파일 처리를 많이 사용하는 PWA의 강력한 기능을 사용할 수 있습니다.
File Handling 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 Handling 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를 사용해 보고 데스크톱에 설치한 후 지원되는 파일 형식 중 하나를 열어 보세요. 즐거운 이미지 편집 되세요.