☰

Better Figma Layer Exporter

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

当前为 2023-04-13 提交的版本，查看 最新版本。

  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.1
  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.         const container = document.querySelector("div.raw_components--panel--YDedw.export_panel--standalonePanel--yXYPM");
  275.         if (container !== null) {
  276.             if (document.getElementById(svgButtonId) === null) {
  277.                 container.parentElement.appendChild(svgoButton);
  278.             }
  279.             if (document.getElementById(pngButtonId) === null) {
  280.                 container.parentElement.appendChild(pngButton);
  281.             }
  282.             if (document.getElementById(webpButtonId) === null) {
  283.                 container.parentElement.appendChild(webpButton);
  284.             }
  285.         }
  286.     }).observe(document.body, {childList: true, subtree: true});
  287.  
  288.     const Toast = Swal.mixin({
  289.         position: "center",
  290.         allowOutsideClick: false
  291.     });
  292.  
  293.     // SVGO 优化下载功能 START
  294.     async function onClickDownloadSvg() {
  295.         const layerList = getSelectedLayerList();
  296.         if (layerList.length === 0) {
  297.             showError("未选择图层");
  298.             return;
  299.         }
  300.         const fileKey = figma.fileKey;
  301.         const dirHandle = await unsafeWindow.showDirectoryPicker({id: `${fileKey}-svg`, mode: "readwrite"});
  302.         showExporting();
  303.         try {
  304.             const finalImageList = await downloadSelectedLayerAsSvg(dirHandle, fileKey, layerList);
  305.             const successText = getSuccessText(finalImageList);
  306.             showSuccess(successText);
  307.         } catch (e) {
  308.             console.error(e);
  309.             showError(e.toString());
  310.         }
  311.     }
  312.  
  313.     /**
  314.      * 将选中的图层下载为经 svgo 优化过后的 svg 图像，保存到指定地址
  315.      * @async
  316.      * @param dirHandle {FileSystemDirectoryHandle} 文件操作 Handle
  317.      * @param fileKey {string} figma 文件 key
  318.      * @param layerList {Image[]} 图层信息，格式为 [{"id": "svg id", "name": "svg name"}]
  319.      * @return {Promise<Image[]>}
  320.      */
  321.     async function downloadSelectedLayerAsSvg(dirHandle, fileKey, layerList) {
  322.         let optimizedImageList;
  323.         // 1. 下载源 svg
  324.         const imageList = await downloadImageFromFigma(fileKey, layerList, "svg", 1);
  325.         if (imageList === undefined || imageList.length === 0) {
  326.             throw new Error("从 figma 获取图片失败，请检查网络连接");
  327.         }
  328.         // 任何一张图层未下载成功，都判定整体失败
  329.         if (!imageList.every(image => image.originalContent !== undefined)) {
  330.             throw new Error("从 figma 下载图片内容失败，请检查网络连接");
  331.         }
  332.         // 2. 经 svgo 优化
  333.         optimizedImageList = await optimizeSvg(imageList, svgPrecision);
  334.         // 3. 保存到指定文件
  335.         optimizedImageList.forEach(image => image.finalContent = image.processedContent);
  336.         await saveImageWithDifferentDpiToDir(dirHandle, optimizedImageList);
  337.         return optimizedImageList;
  338.     }
  339.  
  340.     /**
  341.      *
  342.      * @param imageList {Image[]}
  343.      * @param precision {number}
  344.      * @returns
  345.      */
  346.     async function optimizeSvg(imageList, precision) {
  347.         try {
  348.             const svgContentList = await Promise.all(imageList.map(image => image.originalContent.text()));
  349.             const requestBody = {
  350.                 precision: precision,
  351.                 svgContentList: svgContentList
  352.             };
  353.             const response = await fetch(getSvgOptimizerRequestUrl(), {
  354.                 method: "POST",
  355.                 headers: {"Content-Type": "application/json"},
  356.                 body: JSON.stringify(requestBody)
  357.             });
  358.             const responseJson = await response.json();
  359.             imageList.forEach((image, index) => {
  360.                 image.processedContent = new Blob([responseJson[index]], {
  361.                     type: image.originalContent.type
  362.                 });
  363.             });
  364.  
  365.             return imageList;
  366.         } catch (e) {
  367.             console.error(e);
  368.             throw new e;
  369.         }
  370.     }
  371.  
  372.     // SVGO 优化下载功能 END
  373.  
  374.     // PNG 下载及转换功能 START
  375.     async function onClickDownloadPng(convertToWebp) {
  376.         const layerList = getSelectedLayerList();
  377.         if (layerList.length === 0) {
  378.             showError("未选择图层");
  379.             return;
  380.         }
  381.         const fileKey = figma.fileKey;
  382.         let dirHandleId;
  383.         if (convertToWebp) {
  384.             dirHandleId = `${fileKey}-webp`;
  385.         } else {
  386.             dirHandleId = `${fileKey}-png`;
  387.         }
  388.         const dirHandle = await unsafeWindow.showDirectoryPicker({id: dirHandleId, mode: "readwrite"});
  389.         showExporting();
  390.         const scaleList = await getScaleList(dirHandle);
  391.         if (scaleList.length === 0) {
  392.             showError("所选目录下需要有指定 dpi 的\"drawable-*dpi\"的文件夹");
  393.             return;
  394.         }
  395.         try {
  396.             const finalImageList = await exportPng(convertToWebp, dirHandle, fileKey, layerList, scaleList);
  397.             let successText;
  398.             if (!finalImageList.every(image => image.format === "png")) {
  399.                 // 表示有导出为 webp 的文件
  400.                 successText = getSuccessText(finalImageList);
  401.             }
  402.             showSuccess(successText);
  403.         } catch (e) {
  404.             console.error(e);
  405.             showError(e.toString());
  406.         }
  407.     }
  408.  
  409.     /**
  410.      *
  411.      * @param {boolean} convertToWebp 是否需要转换成 webp
  412.      * @param {FileSystemDirectoryHandle} dirHandle
  413.      * @param {string} fileKey figma 对应的文件 key
  414.      * @param {Image[]} layerList 需要导出的图层信息，包括 id 和 name
  415.      * @param {number[]} scaleList dpi 对应的缩放倍率
  416.      * @returns {Promise<Image[]>}
  417.      */
  418.     async function exportPng(convertToWebp, dirHandle, fileKey, layerList, scaleList) {
  419.         let imageList = await downloadSelectedLayerAsPng(dirHandle, fileKey, layerList, scaleList);
  420.         if (convertToWebp) {
  421.             imageList = await transferPngListToWebp(imageList, webpQuality);
  422.             imageList.forEach((image) => {
  423.                 // 只有在 webp 小于 png 时，才存储为 webp
  424.                 if (image.processedContent.size > image.originalContent.size) {
  425.                     image.format = "png";
  426.                     image.finalContent = image.originalContent;
  427.                 } else {
  428.                     image.format = "webp";
  429.                     image.finalContent = image.processedContent;
  430.                 }
  431.             });
  432.         } else {
  433.             imageList.forEach((image) => {
  434.                 image.format = "png";
  435.                 image.finalContent = image.originalContent;
  436.             });
  437.         }
  438.         await saveImageWithDifferentDpiToDir(dirHandle, imageList);
  439.         return imageList;
  440.     }
  441.  
  442.     /**
  443.      * 通过分析选中目录下的文件夹情况，得出需要下载的 dpi 对应的缩放倍率列表
  444.      * @param {FileSystemDirectoryHandle} dirHandle
  445.      * @return {Promise<number[]>}
  446.      */
  447.     async function getScaleList(dirHandle) {
  448.         const scaleList = [];
  449.         for await (const file of dirHandle.values()) {
  450.             if (file.kind === "directory") {
  451.                 const scale = dirNameToScaleMap().get(file.name);
  452.                 if (scale !== undefined) {
  453.                     scaleList.push(scale);
  454.                 }
  455.             }
  456.         }
  457.         return scaleList;
  458.     }
  459.  
  460.     /**
  461.      * 将选中的图层根据给出的 scaleList 下载为 png
  462.      * @param {FileSystemDirectoryHandle} dirHandle 文件操作 Handle
  463.      * @param {string} fileKey figma 文件 key
  464.      * @param {Image[]} layerList 图层信息，格式为 [{"id": "svg id", "name": "svg name"}]
  465.      * @param {number[]} scaleList dpi 对应的缩放倍率
  466.      * @return {Promise<Image[]>} 从 figma 下载下来的图片内容
  467.      */
  468.     async function downloadSelectedLayerAsPng(dirHandle, fileKey, layerList, scaleList) {
  469.         const imageGroupByScale = await Promise.all(scaleList.map(scale => downloadImageFromFigma(fileKey, layerList, "png", scale)));
  470.         /** @type {Image[]} */
  471.         const imageList = imageGroupByScale.flat().filter(image => image !== undefined);
  472.         if (imageList === undefined || imageList.length === 0) {
  473.             throw new Error("从 figma 获取图片失败，请检查网络连接");
  474.         }
  475.         // 任何一张图层未下载成功，都判定整体失败
  476.         if (!imageList.every(image => image.originalContent !== undefined)) {
  477.             throw new Error("从 figma 下载图片内容失败，请检查网络连接");
  478.         }
  479.         return imageList;
  480.     }
  481.  
  482.     /**
  483.      * 批量转换 png 为 webp
  484.      * @param {Image[]} imageList
  485.      * @param {number} quality 质量
  486.      * @return {Promise<Image[]>} 输出的值比参数 imageList 添加了 processedContent 属性
  487.      *
  488.      * @throws {Error} 操作失败会抛出异常
  489.      */
  490.     async function transferPngListToWebp(imageList, quality) {
  491.         try {
  492.             const responseList = await Promise.all(
  493.                 imageList.map(image => {
  494.                     return fetch(getPngConvertToWebpRequestUrl(), {
  495.                         method: "POST",
  496.                         headers: {
  497.                             "Content-Type": "application/octet-stream",
  498.                             "quality": quality
  499.                         },
  500.                         body: image.originalContent
  501.                     });
  502.                 })
  503.             );
  504.  
  505.             for (const image of imageList) {
  506.                 const index = imageList.indexOf(image);
  507.                 image.processedContent = await responseList[index].blob();
  508.             }
  509.             return imageList;
  510.         } catch (e) {
  511.             console.error(e);
  512.             throw new Error("png 转 webp 操作失败，请检查是否开启优化服务器");
  513.         }
  514.     }
  515.  
  516.     // PNG 下载及转换功能 END
  517.  
  518.     // 公共能力 START
  519.     /**
  520.      * 获取当前选中的图层，包括 id 和 name
  521.      * @return {[Image]}
  522.      */
  523.     function getSelectedLayerList() {
  524.         return figma.currentPage.selection.map(node => new Image(node.id, node.name.toLowerCase().replace(/[^a-z0-9_]/g, "")));
  525.     }
  526.  
  527.     /**
  528.      * 生成的一个随机四位数，并以下划线开头，作为文件的前缀，以防重名时覆盖已有文件
  529.      * @return {string}
  530.      */
  531.     function getRandomPrefix() {
  532.         return "_" + Math.floor(Math.random() * 9000 + 1000);
  533.     }
  534.  
  535.     /**
  536.      * 下载选中图层的内容，包括内容指向 url 和具体的文件内容
  537.      * @async
  538.      * @param  {string} figmaFileKey
  539.      * @param {string} format 格式 svg, png
  540.      * @param {number} scale 缩放大小
  541.      * @param {Image[]} layerList 包含有 id 和 name 的图层信息列表
  542.      * @returns {Promise<Image[]>} 从 figma 下载下来的图片内容
  543.      */
  544.     async function downloadImageFromFigma(figmaFileKey, layerList, format, scale) {
  545.         try {
  546.             // 此处必须深拷贝
  547.             const imageList = layerList.map(layer => new Image(layer.id, layer.name));
  548.             const ids = imageList.map(image => image.id);
  549.             let url = `https://api.figma.com/v1/images/${figmaFileKey}?ids=${ids.join(",")}&format=${format}&scale=${scale}`;
  550.             const res = await fetch(url,
  551.                 {
  552.                     headers: {
  553.                         "X-FIGMA-TOKEN": figmaToken
  554.                     }
  555.                 }
  556.             );
  557.             if (res.status !== 200) return undefined;
  558.             const originalImageListJson = await res.json();
  559.             imageList.forEach(layer => {
  560.                 layer.url = originalImageListJson.images[layer.id];
  561.                 layer.scale = scale;
  562.                 layer.format = format;
  563.             });
  564.             // 下载 image 内容
  565.             const originalContentList = await Promise.all(imageList.map(image => downloadOriginalImageContent(image.url)));
  566.             originalContentList.forEach((originalContent, index) => {
  567.                 imageList[index].originalContent = originalContent;
  568.             });
  569.             return imageList;
  570.         } catch (e) {
  571.             console.error(e);
  572.         }
  573.     }
  574.  
  575.     /**
  576.      * 下载给定的 url 的内容
  577.      * @async
  578.      * @param url 资源目标 url
  579.      * @returns {Promise<Blob>} 下载下来的二进制内容
  580.      */
  581.     async function downloadOriginalImageContent(url) {
  582.         try {
  583.             let res = await fetch(url);
  584.             if (res.status === 200) {
  585.                 // 需要用二进制数据
  586.                 return await res.blob();
  587.             } else {
  588.                 console.log("错误？" + res.status);
  589.             }
  590.         } catch (e) {
  591.             console.error(e);
  592.         }
  593.     }
  594.  
  595.     /**
  596.      * 保存内容到文件
  597.      * @param {FileSystemDirectoryHandle} dirHandle
  598.      * @param {Image[]} imageList
  599.      */
  600.     async function saveImageWithDifferentDpiToDir(dirHandle, imageList) {
  601.         const prefix = getRandomPrefix();
  602.         for (const image of imageList) {
  603.             /** @type {FileSystemDirectoryHandle} */
  604.             let drawableDirHandle;
  605.             if (image.format === "svg") {
  606.                 // svg 图片直接保存到目录下
  607.                 drawableDirHandle = dirHandle;
  608.             } else {
  609.                 // 其它图片需要保存到对应 dpi 的目录下
  610.                 const drawableDirName = scaleToDirNameMap().get(image.scale);
  611.                 drawableDirHandle = await dirHandle.getDirectoryHandle(drawableDirName);
  612.             }
  613.             const fileHandle = await drawableDirHandle.getFileHandle(`${prefix}_${image.name}.${image.format}`, {create: true});
  614.             const writable = await fileHandle.createWritable();
  615.             await writable.write(image.finalContent);
  616.             await writable.close();
  617.         }
  618.     }
  619.  
  620.     /**
  621.      * 格式化 bytes 数量为可读字符串
  622.      * @param {number} bytesSize
  623.      * @return {string}
  624.      */
  625.     function formatBytes(bytesSize) {
  626.         if (bytesSize < 1024) {
  627.             return bytesSize + " Bytes";
  628.         } else if (bytesSize < 1024 * 1024) {
  629.             return (bytesSize / 1024).toFixed(2) + " KB";
  630.         } else {
  631.             return (bytesSize / (1024 * 1024)).toFixed(2) + " MB";
  632.         }
  633.     }
  634.  
  635.     /**
  636.      * 获取成功提示文字，主要是关于体积缩减大小
  637.      * @param {Image[]} finalImageList
  638.      * @return {string}
  639.      */
  640.     function getSuccessText(finalImageList) {
  641.         const originalSize = finalImageList.reduce((accumulator, currentValue) => {
  642.             return accumulator + currentValue.originalContent.size;
  643.         }, 0);
  644.         const finalSize = finalImageList.reduce((accumulator, currentValue) => {
  645.             return accumulator + currentValue.finalContent.size;
  646.         }, 0);
  647.         return `成功缩减体积 ${formatBytes(originalSize - finalSize)}（${((originalSize - finalSize) * 100 / originalSize).toFixed(0)}%）`;
  648.     }
  649.  
  650.     function showExporting() {
  651.         Toast.fire({
  652.             title: "图层导出中...",
  653.             didOpen() {
  654.                 Swal.showLoading();
  655.             }
  656.         });
  657.     }
  658.  
  659.     /**
  660.      * @param {string} successText
  661.      */
  662.     function showSuccess(successText) {
  663.         Toast.fire({
  664.             icon: "success",
  665.             title: "导出成功",
  666.             text: successText
  667.         });
  668.     }
  669.  
  670.     /**
  671.      * @param {string} errorText
  672.      */
  673.     function showError(errorText) {
  674.         Toast.fire({
  675.             icon: "error",
  676.             text: errorText,
  677.             title: "导出失败，请重试",
  678.         });
  679.     }
  680.  
  681.     function getSvgOptimizerRequestUrl() {
  682.         if (svgOptimizerRequestUrl === "") {
  683.             return "https://nifh3bnmc3.hk.aircode.run/svgOptimizer";
  684.         } else {
  685.             return svgOptimizerRequestUrl;
  686.         }
  687.     }
  688.  
  689.     function getPngConvertToWebpRequestUrl() {
  690.         if (pngConvertToWebpRequestUrl === "") {
  691.             return "https://nifh3bnmc3.hk.aircode.run/webpConvetor";
  692.         } else {
  693.             return pngConvertToWebpRequestUrl;
  694.         }
  695.     }
  696.  
  697.     // 公共能力 END
  698.  
  699. })();