☰

Better Figma Layer Exporter

更方便的 Figma 图层导出，主要功能：1. 选定图层直接导出为 png 并按 dpi 分配到对应 dpi 的 drawable 文件夹; 2. 支持将 PNG 转换成 WebP 再导出; 3. 支持导出经 SVGO 优化的 svg 图片。

  1. // ==UserScript==
  2. // @name         Better Figma Layer Exporter
  3. // @name:zh-CN   Better Figma Layer Exporter
  4. // @namespace    https://github.com/XuQK/Better-Figma-Layer-Exporter
  5. // @version      1.1.3
  6. // @license      MIT
  7. // @description A more convenient Figma layer export solution, featuring the following main functions: 1. Direct export of selected layers as PNGs and automatically assigning them to their corresponding DPI drawable folders; 2. Support for converting PNGs to WebP format before exporting; 3. Support for exporting SVGs optimized through SVGO.
  8. // @description:zh-CN  更方便的 Figma 图层导出，主要功能：1. 选定图层直接导出为 png 并按 dpi 分配到对应 dpi 的 drawable 文件夹; 2. 支持将 PNG 转换成 WebP 再导出; 3. 支持导出经 SVGO 优化的 svg 图片。
  9. // @author       XuQK
  10. // @match        https://www.figma.com/*
  11. // @icon         https://github.com/XuQK/Better-Figma-Layer-Exporter/blob/master/assets/icon.jpeg?raw=true
  12. // @grant        unsafeWindow
  13. // @grant        GM_setValue
  14. // @grant        GM_getValue
  15. // @grant        GM_registerMenuCommand
  16. // @require      https://cdn.jsdelivr.net/npm/sweetalert2@11
  17. // @connect      *
  18. // @run-at       document-end
  19. // ==/UserScript==
  20.  
  21. (function () {
  22.     "use strict";
  23.  
  24.     const coloredToastStyle = document.createElement("style");
  25.     coloredToastStyle.innerHTML = `
  26.     .colored-toast.swal2-icon-success {
  27.   background-color: #a5dc86 !important;
  28. }
  29.  
  30. .colored-toast.swal2-icon-error {
  31.   background-color: #f27474 !important;
  32. }
  33.  
  34. .colored-toast.swal2-icon-warning {
  35.   background-color: #f8bb86 !important;
  36. }
  37.  
  38. .colored-toast.swal2-icon-info {
  39.   background-color: #3fc3ee !important;
  40. }
  41.  
  42. .colored-toast.swal2-icon-question {
  43.   background-color: #87adbd !important;
  44. }
  45.  
  46. .colored-toast .swal2-title {
  47.   color: white;
  48. }
  49.  
  50. .colored-toast .swal2-close {
  51.   color: white;
  52. }
  53.  
  54. .colored-toast .swal2-html-container {
  55.   color: white;
  56. }
  57.     `;
  58.     document.head.appendChild(coloredToastStyle);
  59.  
  60.     GM_registerMenuCommand("Settings/设置", showSettingsDialog, "S");
  61.  
  62.     function showSettingsDialog() {
  63.         Toast.fire({
  64.             title: "Settings / 设置",
  65.             html: `
  66.           <div style="display: flex; align-items: center">
  67.         <label for="kd-figma-token" style="font-size: 18px; width: 10em">Figma token</label>
  68.         <input id="kd-figma-token" class="swal2-input" style="margin: 8px" value="${figmaToken}">
  69.     </div>
  70.     <div style="display: flex; align-items: center">
  71.         <label for="kd-server-svg-optimizer" style="font-size: 18px; width: 10em">Svg Optimizer Url</label>
  72.         <input id="kd-server-svg-optimizer" class="swal2-input" style="margin: 8px" value="${svgOptimizerRequestUrl}">
  73.     </div>
  74.     <div style="display: flex; align-items: center">
  75.         <label for="kd-server-png-convert-to-webp" style="font-size: 18px; width: 10em">Webp Converter url</label>
  76.         <input id="kd-server-png-convert-to-webp" class="swal2-input" style="margin: 8px" value="${pngConvertToWebpRequestUrl}">
  77.     </div>
  78.     <div style="display: flex; align-items: center">
  79.         <label for="kd-svg-precision" style="font-size: 18px; width: 10em">Svg precision</label>
  80.         <input id="kd-svg-precision" class="swal2-input" style="margin: 8px" value="${svgPrecision}">
  81.     </div>
  82.     <div style="display: flex; align-items: center">
  83.         <label for="kd-webp-quality" style="font-size: 18px; width: 10em">WebP quality</label>
  84.         <input id="kd-webp-quality" class="swal2-input" style="margin: 8px" value="${webpQuality}">
  85.     </div>
  86.     <div style="display: flex; align-items: center; height: 4em">
  87.         <label for="kd-mode" style="font-size: 18px; width: 10em">Day/Night Mode</label>
  88.         <input id="kd-mode-day" name="kd-mode" value="day" type="radio" style="margin: 8px">Day</input>
  89.         <input id="kd-mode-night" name="kd-mode" value="night" type="radio" style="margin: 8px">Night</input>
  90.     </div>
  91.     <p></p>
  92.     <p style="text-align: start; color: #FF5252">PS:</p>
  93.     <p style="text-align: start; font-size: 14px; color: #FF5252">1. SVG 优化和 PNG 转 WebP 的需要后台能力，目前是白嫖的 node 服务器，资源有限，请温柔使用~</p>
  94.     <p style="text-align: start; font-size: 14px; color: #FF5252">2. 如果想将此 node 服务器运行在自己本地，参见 <a href="https://github.com/XuQK/Better-Figma-Layer-Exporter#扩展功能" target="_blank">https://github.com/XuQK/Better-Figma-Layer-Exporter#扩展功能</a></p>
  95.     
  96.     </div>
  97.           `,
  98.             width: 600,
  99.             focusConfirm: false,
  100.             showCancelButton: true,
  101.             didOpen() {
  102.                 document.getElementById(`kd-mode-${mode}`).checked = true;
  103.             },
  104.             preConfirm: () => {
  105.                 return [
  106.                     document.getElementById("kd-figma-token").value,
  107.                     document.getElementById("kd-server-svg-optimizer").value,
  108.                     document.getElementById("kd-server-png-convert-to-webp").value,
  109.                     document.getElementById("kd-svg-precision").value,
  110.                     document.getElementById("kd-webp-quality").value,
  111.                     document.querySelector("input[name='kd-mode']:checked").value
  112.                 ];
  113.             }
  114.         }).then(value => {
  115.             const params = value.value;
  116.             figmaToken = params[0];
  117.             svgOptimizerRequestUrl = params[1];
  118.             pngConvertToWebpRequestUrl = params[2];
  119.             svgPrecision = params[3];
  120.             webpQuality = params[4];
  121.             mode = params[5];
  122.  
  123.             GM_setValue("figmaToken", figmaToken);
  124.             GM_setValue("svgOptimizerRequestUrl", svgOptimizerRequestUrl);
  125.             GM_setValue("pngConvertToWebpRequestUrl", pngConvertToWebpRequestUrl);
  126.             GM_setValue("svgPrecision", svgPrecision);
  127.             GM_setValue("webpQuality", webpQuality);
  128.             GM_setValue("mode", mode);
  129.         });
  130.     }
  131.  
  132.     // 默认配置
  133.     let figmaToken = GM_getValue("figmaToken", "");
  134.     let svgOptimizerRequestUrl = GM_getValue("svgOptimizerRequestUrl", "");
  135.     let pngConvertToWebpRequestUrl = GM_getValue("pngConvertToWebpRequestUrl", "");
  136.     // svg 专用
  137.     let svgPrecision = GM_getValue("svgPrecision", 1);
  138.     // png 专用
  139.     // webp 转换质量，0-100，默认 75
  140.     let webpQuality = GM_getValue("webpQuality", 75);
  141.     // 是否暗色模式
  142.     let mode = GM_getValue("mode", "day");
  143.  
  144.     class Image {
  145.         /**
  146.          * @type {string}
  147.          */
  148.         url;
  149.  
  150.         /**
  151.          * @type {Blob} 从 figma 下载的原始图层内容，可能是 svg，也有可能是 png
  152.          */
  153.         originalContent;
  154.  
  155.         /**
  156.          * @type {number}
  157.          */
  158.         scale;
  159.  
  160.         /**
  161.          * @type {Blob} 经处理后的数据，可能是优化后的 svg，也有可能是经 png 转换过后的 webp
  162.          */
  163.         processedContent;
  164.  
  165.         /**
  166.          * @type {string} 最终创建文件的格式/后缀名
  167.          */
  168.         format;
  169.  
  170.         /**
  171.          * @type {Blob} 最终存储到文件的数据
  172.          */
  173.         finalContent;
  174.  
  175.         /**
  176.          * @param id {string}
  177.          * @param name {string}
  178.          */
  179.         constructor(id, name) {
  180.             this.id = id;
  181.             this.name = name;
  182.         }
  183.     }
  184.  
  185.     function dirNameToScaleMap() {
  186.         if (mode === "day") {
  187.             return _dirNameToScaleMapDay;
  188.         } else {
  189.             return _dirNameToScaleMapNight;
  190.         }
  191.     }
  192.  
  193.     function scaleToDirNameMap() {
  194.         if (mode === "day") {
  195.             return _scaleToDirNameMapDay;
  196.         } else {
  197.             return _scaleToDirNameMapNight;
  198.         }
  199.     }
  200.  
  201.     const _dirNameToScaleMapDay = new Map();
  202.     _dirNameToScaleMapDay.set("drawable-ldpi", 0.75);
  203.     _dirNameToScaleMapDay.set("drawable-mdpi", 1);
  204.     _dirNameToScaleMapDay.set("drawable-hdpi", 1.5);
  205.     _dirNameToScaleMapDay.set("drawable-xhdpi", 2);
  206.     _dirNameToScaleMapDay.set("drawable-xxhdpi", 3);
  207.     _dirNameToScaleMapDay.set("drawable-xxxhdpi", 4);
  208.  
  209.     const _scaleToDirNameMapDay = new Map();
  210.     _scaleToDirNameMapDay.set(0.75, "drawable-ldpi");
  211.     _scaleToDirNameMapDay.set(1, "drawable-mdpi");
  212.     _scaleToDirNameMapDay.set(1.5, "drawable-hdpi");
  213.     _scaleToDirNameMapDay.set(2, "drawable-xhdpi");
  214.     _scaleToDirNameMapDay.set(3, "drawable-xxhdpi");
  215.     _scaleToDirNameMapDay.set(4, "drawable-xxxhdpi");
  216.  
  217.     const _dirNameToScaleMapNight = new Map();
  218.     _dirNameToScaleMapNight.set("drawable-night-ldpi", 0.75);
  219.     _dirNameToScaleMapNight.set("drawable-night-mdpi", 1);
  220.     _dirNameToScaleMapNight.set("drawable-night-hdpi", 1.5);
  221.     _dirNameToScaleMapNight.set("drawable-night-xhdpi", 2);
  222.     _dirNameToScaleMapNight.set("drawable-night-xxhdpi", 3);
  223.     _dirNameToScaleMapNight.set("drawable-night-xxxhdpi", 4);
  224.  
  225.     const _scaleToDirNameMapNight = new Map();
  226.     _scaleToDirNameMapNight.set(0.75, "drawable-night-ldpi");
  227.     _scaleToDirNameMapNight.set(1, "drawable-night-mdpi");
  228.     _scaleToDirNameMapNight.set(1.5, "drawable-night-hdpi");
  229.     _scaleToDirNameMapNight.set(2, "drawable-night-xhdpi");
  230.     _scaleToDirNameMapNight.set(3, "drawable-night-xxhdpi");
  231.     _scaleToDirNameMapNight.set(4, "drawable-night-xxxhdpi");
  232.  
  233.     const svgButtonId = "svgo-button";
  234.     const svgoButton = document.createElement("button");
  235.     svgoButton.id = svgButtonId;
  236.     svgoButton.className = "basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk button_row--btnNarrow--bKZDj button_row--btn--0W3Mm basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk";
  237.     svgoButton.style.marginTop = "16px";
  238.     svgoButton.style.width = "90%";
  239.     svgoButton.style.marginLeft = "auto";
  240.     svgoButton.style.marginRight = "auto";
  241.     svgoButton.innerText = "经 SVGO 优化并导出";
  242.     svgoButton.addEventListener("click", function () {
  243.         onClickDownloadSvg().then();
  244.     });
  245.  
  246.     const pngButtonId = "png-button";
  247.     const pngButton = document.createElement("button");
  248.     pngButton.id = pngButtonId;
  249.     pngButton.className = "basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk button_row--btnNarrow--bKZDj button_row--btn--0W3Mm basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk";
  250.     pngButton.style.marginTop = "16px";
  251.     pngButton.style.width = "90%";
  252.     pngButton.style.marginLeft = "auto";
  253.     pngButton.style.marginRight = "auto";
  254.     pngButton.innerText = "导出 PNG 到指定 res 目录";
  255.     pngButton.addEventListener("click", function () {
  256.         onClickDownloadPng(false).then();
  257.     });
  258.  
  259.     const webpButtonId = "webp-button";
  260.     const webpButton = document.createElement("button");
  261.     webpButton.id = webpButtonId;
  262.     webpButton.className = "basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk button_row--btnNarrow--bKZDj button_row--btn--0W3Mm basic_form--btn--t7Y67 ellipsis--ellipsis--70pHK text--fontPos11--rO47d text--_fontBase--VaHfk";
  263.     webpButton.style.width = "90%";
  264.     webpButton.style.marginTop = "16px";
  265.     webpButton.style.marginLeft = "auto";
  266.     webpButton.style.marginRight = "auto";
  267.     webpButton.innerText = "导出 WebP 到指定 res 目录";
  268.     webpButton.addEventListener("click", function () {
  269.         onClickDownloadPng(true).then();
  270.     });
  271.  
  272.     // 监听 body 元素变动，根据情况插入导出按钮（对于无编辑器权限的使用者）
  273.     new MutationObserver(() => {
  274.         try {
  275.             let c = null;
  276.             const anchorElemForGuest = document.querySelector("div.raw_components--panel--YDedw.export_panel--standalonePanel--yXYPM");
  277.             if (anchorElemForGuest !== null) {
  278.                 c = anchorElemForGuest.parentElement;
  279.             } else {
  280.                 const nodeList = document.querySelectorAll("div.draggable_list--panelTitleText--Bj2Hu")
  281.                 const anchorElemForOwner = Array.from(nodeList).find(node => node.innerText === "Export")
  282.                 if (anchorElemForOwner !== null) {
  283.                     c = anchorElemForOwner.parentElement.parentElement.parentElement.parentElement.parentElement
  284.                 }
  285.             }
  286.             if (c !== null) {
  287.                 if (document.getElementById(svgButtonId) === null) {
  288.                     c.appendChild(svgoButton);
  289.                 }
  290.                 if (document.getElementById(pngButtonId) === null) {
  291.                     c.appendChild(pngButton);
  292.                 }
  293.                 if (document.getElementById(webpButtonId) === null) {
  294.                     c.appendChild(webpButton);
  295.                 }
  296.             }
  297.         } catch (e) {
  298.         }
  299.     }).observe(document.body, {childList: true, subtree: true});
  300.     // （对于有编辑权限的使用者）
  301.  
  302.     const Toast = Swal.mixin({
  303.         position: "center",
  304.         allowOutsideClick: false
  305.     });
  306.  
  307.     // SVGO 优化下载功能 START
  308.     async function onClickDownloadSvg() {
  309.         const layerList = getSelectedLayerList();
  310.         if (layerList.length === 0) {
  311.             showError("未选择图层");
  312.             return;
  313.         }
  314.         const fileKey = figma.fileKey;
  315.         const dirHandle = await unsafeWindow.showDirectoryPicker({id: `${fileKey}-svg`, mode: "readwrite"});
  316.         showExporting();
  317.         try {
  318.             const finalImageList = await downloadSelectedLayerAsSvg(dirHandle, fileKey, layerList);
  319.             const successText = getSuccessText(finalImageList);
  320.             showSuccess(successText);
  321.         } catch (e) {
  322.             console.error(e);
  323.             showError(e.toString());
  324.         }
  325.     }
  326.  
  327.     /**
  328.      * 将选中的图层下载为经 svgo 优化过后的 svg 图像，保存到指定地址
  329.      * @async
  330.      * @param dirHandle {FileSystemDirectoryHandle} 文件操作 Handle
  331.      * @param fileKey {string} figma 文件 key
  332.      * @param layerList {Image[]} 图层信息，格式为 [{"id": "svg id", "name": "svg name"}]
  333.      * @return {Promise<Image[]>}
  334.      */
  335.     async function downloadSelectedLayerAsSvg(dirHandle, fileKey, layerList) {
  336.         let optimizedImageList;
  337.         // 1. 下载源 svg
  338.         const imageList = await downloadImageFromFigma(fileKey, layerList, "svg", 1);
  339.         if (imageList === undefined || imageList.length === 0) {
  340.             throw new Error("从 figma 获取图片失败，请检查网络连接");
  341.         }
  342.         // 任何一张图层未下载成功，都判定整体失败
  343.         if (!imageList.every(image => image.originalContent !== undefined)) {
  344.             throw new Error("从 figma 下载图片内容失败，请检查网络连接");
  345.         }
  346.         // 2. 经 svgo 优化
  347.         optimizedImageList = await optimizeSvg(imageList, svgPrecision);
  348.         // 3. 保存到指定文件
  349.         optimizedImageList.forEach(image => image.finalContent = image.processedContent);
  350.         await saveImageWithDifferentDpiToDir(dirHandle, optimizedImageList);
  351.         return optimizedImageList;
  352.     }
  353.  
  354.     /**
  355.      *
  356.      * @param imageList {Image[]}
  357.      * @param precision {number}
  358.      * @returns
  359.      */
  360.     async function optimizeSvg(imageList, precision) {
  361.         try {
  362.             const svgContentList = await Promise.all(imageList.map(image => image.originalContent.text()));
  363.             const requestBody = {
  364.                 precision: precision,
  365.                 svgContentList: svgContentList
  366.             };
  367.             const response = await fetch(getSvgOptimizerRequestUrl(), {
  368.                 method: "POST",
  369.                 headers: {"Content-Type": "application/json"},
  370.                 body: JSON.stringify(requestBody)
  371.             });
  372.             const responseJson = await response.json();
  373.             imageList.forEach((image, index) => {
  374.                 image.processedContent = new Blob([responseJson[index]], {
  375.                     type: image.originalContent.type
  376.                 });
  377.             });
  378.  
  379.             return imageList;
  380.         } catch (e) {
  381.             console.error(e);
  382.             throw new e;
  383.         }
  384.     }
  385.  
  386.     // SVGO 优化下载功能 END
  387.  
  388.     // PNG 下载及转换功能 START
  389.     async function onClickDownloadPng(convertToWebp) {
  390.         const layerList = getSelectedLayerList();
  391.         if (layerList.length === 0) {
  392.             showError("未选择图层");
  393.             return;
  394.         }
  395.         const fileKey = figma.fileKey;
  396.         let dirHandleId;
  397.         if (convertToWebp) {
  398.             dirHandleId = `${fileKey}-webp`;
  399.         } else {
  400.             dirHandleId = `${fileKey}-png`;
  401.         }
  402.         const dirHandle = await unsafeWindow.showDirectoryPicker({id: dirHandleId, mode: "readwrite"});
  403.         showExporting();
  404.         const scaleList = await getScaleList(dirHandle);
  405.         if (scaleList.length === 0) {
  406.             showError("所选目录下需要有指定 dpi 的\"drawable-*dpi\"的文件夹");
  407.             return;
  408.         }
  409.         try {
  410.             const finalImageList = await exportPng(convertToWebp, dirHandle, fileKey, layerList, scaleList);
  411.             let successText;
  412.             if (!finalImageList.every(image => image.format === "png")) {
  413.                 // 表示有导出为 webp 的文件
  414.                 successText = getSuccessText(finalImageList);
  415.             }
  416.             showSuccess(successText);
  417.         } catch (e) {
  418.             console.error(e);
  419.             showError(e.toString());
  420.         }
  421.     }
  422.  
  423.     /**
  424.      *
  425.      * @param {boolean} convertToWebp 是否需要转换成 webp
  426.      * @param {FileSystemDirectoryHandle} dirHandle
  427.      * @param {string} fileKey figma 对应的文件 key
  428.      * @param {Image[]} layerList 需要导出的图层信息，包括 id 和 name
  429.      * @param {number[]} scaleList dpi 对应的缩放倍率
  430.      * @returns {Promise<Image[]>}
  431.      */
  432.     async function exportPng(convertToWebp, dirHandle, fileKey, layerList, scaleList) {
  433.         let imageList = await downloadSelectedLayerAsPng(dirHandle, fileKey, layerList, scaleList);
  434.         if (convertToWebp) {
  435.             imageList = await transferPngListToWebp(imageList, webpQuality);
  436.             imageList.forEach((image) => {
  437.                 // 只有在 webp 小于 png 时，才存储为 webp
  438.                 if (image.processedContent.size > image.originalContent.size) {
  439.                     image.format = "png";
  440.                     image.finalContent = image.originalContent;
  441.                 } else {
  442.                     image.format = "webp";
  443.                     image.finalContent = image.processedContent;
  444.                 }
  445.             });
  446.         } else {
  447.             imageList.forEach((image) => {
  448.                 image.format = "png";
  449.                 image.finalContent = image.originalContent;
  450.             });
  451.         }
  452.         await saveImageWithDifferentDpiToDir(dirHandle, imageList);
  453.         return imageList;
  454.     }
  455.  
  456.     /**
  457.      * 通过分析选中目录下的文件夹情况，得出需要下载的 dpi 对应的缩放倍率列表
  458.      * @param {FileSystemDirectoryHandle} dirHandle
  459.      * @return {Promise<number[]>}
  460.      */
  461.     async function getScaleList(dirHandle) {
  462.         const scaleList = [];
  463.         for await (const file of dirHandle.values()) {
  464.             if (file.kind === "directory") {
  465.                 const scale = dirNameToScaleMap().get(file.name);
  466.                 if (scale !== undefined) {
  467.                     scaleList.push(scale);
  468.                 }
  469.             }
  470.         }
  471.         return scaleList;
  472.     }
  473.  
  474.     /**
  475.      * 将选中的图层根据给出的 scaleList 下载为 png
  476.      * @param {FileSystemDirectoryHandle} dirHandle 文件操作 Handle
  477.      * @param {string} fileKey figma 文件 key
  478.      * @param {Image[]} layerList 图层信息，格式为 [{"id": "svg id", "name": "svg name"}]
  479.      * @param {number[]} scaleList dpi 对应的缩放倍率
  480.      * @return {Promise<Image[]>} 从 figma 下载下来的图片内容
  481.      */
  482.     async function downloadSelectedLayerAsPng(dirHandle, fileKey, layerList, scaleList) {
  483.         const imageGroupByScale = await Promise.all(scaleList.map(scale => downloadImageFromFigma(fileKey, layerList, "png", scale)));
  484.         /** @type {Image[]} */
  485.         const imageList = imageGroupByScale.flat().filter(image => image !== undefined);
  486.         if (imageList === undefined || imageList.length === 0) {
  487.             throw new Error("从 figma 获取图片失败，请检查网络连接");
  488.         }
  489.         // 任何一张图层未下载成功，都判定整体失败
  490.         if (!imageList.every(image => image.originalContent !== undefined)) {
  491.             throw new Error("从 figma 下载图片内容失败，请检查网络连接");
  492.         }
  493.         return imageList;
  494.     }
  495.  
  496.     /**
  497.      * 批量转换 png 为 webp
  498.      * @param {Image[]} imageList
  499.      * @param {number} quality 质量
  500.      * @return {Promise<Image[]>} 输出的值比参数 imageList 添加了 processedContent 属性
  501.      *
  502.      * @throws {Error} 操作失败会抛出异常
  503.      */
  504.     async function transferPngListToWebp(imageList, quality) {
  505.         try {
  506.             const responseList = await Promise.all(
  507.                 imageList.map(image => {
  508.                     return fetch(getPngConvertToWebpRequestUrl(), {
  509.                         method: "POST",
  510.                         headers: {
  511.                             "Content-Type": "application/octet-stream",
  512.                             "quality": quality
  513.                         },
  514.                         body: image.originalContent
  515.                     });
  516.                 })
  517.             );
  518.  
  519.             for (const image of imageList) {
  520.                 const index = imageList.indexOf(image);
  521.                 image.processedContent = await responseList[index].blob();
  522.             }
  523.             return imageList;
  524.         } catch (e) {
  525.             console.error(e);
  526.             throw new Error("png 转 webp 操作失败，请检查是否开启优化服务器");
  527.         }
  528.     }
  529.  
  530.     // PNG 下载及转换功能 END
  531.  
  532.     // 公共能力 START
  533.     /**
  534.      * 获取当前选中的图层，包括 id 和 name
  535.      * @return {[Image]}
  536.      */
  537.     function getSelectedLayerList() {
  538.         return figma.currentPage.selection.map(node => new Image(node.id, node.name.toLowerCase().replace(/[^a-z0-9_]/g, "_")));
  539.     }
  540.  
  541.     /**
  542.      * 生成的一个随机四位数，并以下划线开头，作为文件的前缀，以防重名时覆盖已有文件
  543.      * @return {string}
  544.      */
  545.     function getRandomPrefix() {
  546.         return "figma" + Math.floor(Math.random() * 9000 + 1000);
  547.     }
  548.  
  549.     /**
  550.      * 下载选中图层的内容，包括内容指向 url 和具体的文件内容
  551.      * @async
  552.      * @param  {string} figmaFileKey
  553.      * @param {string} format 格式 svg, png
  554.      * @param {number} scale 缩放大小
  555.      * @param {Image[]} layerList 包含有 id 和 name 的图层信息列表
  556.      * @returns {Promise<Image[]>} 从 figma 下载下来的图片内容
  557.      */
  558.     async function downloadImageFromFigma(figmaFileKey, layerList, format, scale) {
  559.         try {
  560.             // 此处必须深拷贝
  561.             const imageList = layerList.map(layer => new Image(layer.id, layer.name));
  562.             const ids = imageList.map(image => image.id);
  563.             let url = `https://api.figma.com/v1/images/${figmaFileKey}?ids=${ids.join(",")}&format=${format}&scale=${scale}`;
  564.             const res = await fetch(url,
  565.                 {
  566.                     headers: {
  567.                         "X-FIGMA-TOKEN": figmaToken
  568.                     }
  569.                 }
  570.             );
  571.             if (res.status !== 200) return undefined;
  572.             const originalImageListJson = await res.json();
  573.             imageList.forEach(layer => {
  574.                 layer.url = originalImageListJson.images[layer.id];
  575.                 layer.scale = scale;
  576.                 layer.format = format;
  577.             });
  578.             // 下载 image 内容
  579.             const originalContentList = await Promise.all(imageList.map(image => downloadOriginalImageContent(image.url)));
  580.             originalContentList.forEach((originalContent, index) => {
  581.                 imageList[index].originalContent = originalContent;
  582.             });
  583.             return imageList;
  584.         } catch (e) {
  585.             console.error(e);
  586.         }
  587.     }
  588.  
  589.     /**
  590.      * 下载给定的 url 的内容
  591.      * @async
  592.      * @param url 资源目标 url
  593.      * @returns {Promise<Blob>} 下载下来的二进制内容
  594.      */
  595.     async function downloadOriginalImageContent(url) {
  596.         try {
  597.             let res = await fetch(url);
  598.             if (res.status === 200) {
  599.                 // 需要用二进制数据
  600.                 return await res.blob();
  601.             } else {
  602.                 console.log("错误？" + res.status);
  603.             }
  604.         } catch (e) {
  605.             console.error(e);
  606.         }
  607.     }
  608.  
  609.     /**
  610.      * 保存内容到文件
  611.      * @param {FileSystemDirectoryHandle} dirHandle
  612.      * @param {Image[]} imageList
  613.      */
  614.     async function saveImageWithDifferentDpiToDir(dirHandle, imageList) {
  615.         const prefix = getRandomPrefix();
  616.         for (const image of imageList) {
  617.             /** @type {FileSystemDirectoryHandle} */
  618.             let drawableDirHandle;
  619.             if (image.format === "svg") {
  620.                 // svg 图片直接保存到目录下
  621.                 drawableDirHandle = dirHandle;
  622.             } else {
  623.                 // 其它图片需要保存到对应 dpi 的目录下
  624.                 const drawableDirName = scaleToDirNameMap().get(image.scale);
  625.                 drawableDirHandle = await dirHandle.getDirectoryHandle(drawableDirName);
  626.             }
  627.             const fileHandle = await drawableDirHandle.getFileHandle(`${prefix}_${image.name}.${image.format}`, {create: true});
  628.             const writable = await fileHandle.createWritable();
  629.             await writable.write(image.finalContent);
  630.             await writable.close();
  631.         }
  632.     }
  633.  
  634.     /**
  635.      * 格式化 bytes 数量为可读字符串
  636.      * @param {number} bytesSize
  637.      * @return {string}
  638.      */
  639.     function formatBytes(bytesSize) {
  640.         if (bytesSize < 1024) {
  641.             return bytesSize + " Bytes";
  642.         } else if (bytesSize < 1024 * 1024) {
  643.             return (bytesSize / 1024).toFixed(2) + " KB";
  644.         } else {
  645.             return (bytesSize / (1024 * 1024)).toFixed(2) + " MB";
  646.         }
  647.     }
  648.  
  649.     /**
  650.      * 获取成功提示文字，主要是关于体积缩减大小
  651.      * @param {Image[]} finalImageList
  652.      * @return {string}
  653.      */
  654.     function getSuccessText(finalImageList) {
  655.         const originalSize = finalImageList.reduce((accumulator, currentValue) => {
  656.             return accumulator + currentValue.originalContent.size;
  657.         }, 0);
  658.         const finalSize = finalImageList.reduce((accumulator, currentValue) => {
  659.             return accumulator + currentValue.finalContent.size;
  660.         }, 0);
  661.         return `成功缩减体积 ${formatBytes(originalSize - finalSize)}（${((originalSize - finalSize) * 100 / originalSize).toFixed(0)}%）`;
  662.     }
  663.  
  664.     function showExporting() {
  665.         Toast.fire({
  666.             title: "图层导出中...",
  667.             didOpen() {
  668.                 Swal.showLoading();
  669.             }
  670.         });
  671.     }
  672.  
  673.     /**
  674.      * @param {string} successText
  675.      */
  676.     function showSuccess(successText) {
  677.         Toast.fire({
  678.             icon: "success",
  679.             title: "导出成功",
  680.             text: successText
  681.         });
  682.     }
  683.  
  684.     /**
  685.      * @param {string} errorText
  686.      */
  687.     function showError(errorText) {
  688.         Toast.fire({
  689.             icon: "error",
  690.             text: errorText,
  691.             title: "导出失败，请重试",
  692.         });
  693.     }
  694.  
  695.     function getSvgOptimizerRequestUrl() {
  696.         if (svgOptimizerRequestUrl === "") {
  697.             return "https://nifh3bnmc3.hk.aircode.run/svgOptimizer";
  698.         } else {
  699.             return svgOptimizerRequestUrl;
  700.         }
  701.     }
  702.  
  703.     function getPngConvertToWebpRequestUrl() {
  704.         if (pngConvertToWebpRequestUrl === "") {
  705.             return "https://nifh3bnmc3.hk.aircode.run/webpConvetor";
  706.         } else {
  707.             return pngConvertToWebpRequestUrl;
  708.         }
  709.     }
  710.  
  711.     // 公共能力 END
  712.  
  713. })();