feat: svgtoimg

src/modules/login/views/Login.vue

@@ -61,6 +61,13 @@
             @click="submit"
             >登录</el-button
           >
+          <el-button
+            type="primary"
+            :loading="isSubmit"
+            class="login-submit"
+            @click="toTransfer"
+            >转img</el-button
+          >
         </el-form-item>
       </el-form>
     </div>
@@ -70,6 +77,7 @@
 <script>
 import { password } from "@/plugins/formRules";
 import { formatDate } from "../../../plugins/utils";
+import { batchSvgToImg } from "../../../plugins/svgToImg";
 import { login, schoolListQuery } from "../api";
 import { Base64 } from "@/plugins/crypto";
 
@@ -169,6 +177,15 @@ export default {
         name: "Home",
       });
     },
+    async toTransfer() {
+      this.isSubmit = true;
+      await batchSvgToImg().catch((error) => {
+        console.error(error);
+      });
+      this.isSubmit = false;
+
+      this.$message.success("转换成功！");
+    },
   },
 };
 </script>

src/plugins/svgToImg.js

@@ -0,0 +1,94 @@
+import { getInputDir, getStageDir, makeDirSync } from "./env";
+const fs = window.nodeRequire("fs");
+const path = window.nodeRequire("path");
+
+export const svgToImage = (svgString) => {
+  return new Promise((resolve, reject) => {
+    const div = document.createElement("div");
+    div.innerHTML = svgString;
+    document.body.appendChild(div);
+    const svgDom = div.firstElementChild;
+    svgDom.style.height = "180px";
+    svgDom.style.width = "auto";
+
+    const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(svgBlob);
+
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = svgDom.clientWidth;
+      canvas.height = svgDom.clientHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+      canvas.toBlob((blob) => {
+        document.body.removeChild(div);
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+
+        reject("error");
+      }, "image/png");
+    };
+
+    img.onerror = (err) => {
+      reject(err);
+    };
+
+    img.src = url;
+  });
+};
+
+function blobToBuffer(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(Buffer.from(reader.result));
+    reader.onerror = () => reject(new Error("Failed to read Blob."));
+    reader.readAsArrayBuffer(blob);
+  });
+}
+
+export async function batchSvgToImg() {
+  const ddir = getInputDir();
+  const outDir = getStageDir();
+  const files = fs
+    .readdirSync(ddir)
+    .filter((fileName) => fileName.toLowerCase().match(/\.(svg)/));
+  const resultJson = {};
+
+  for (let i = 0; i < files.length; i++) {
+    const filename = files[i];
+
+    const filepath = path.join(ddir, filename);
+    const bnames = path.basename(filepath, path.extname(filepath)).split("_");
+
+    const mainName = bnames[0];
+    const subName = bnames.length < 4 ? bnames[0] : bnames[2];
+    const itemName = bnames.length < 4 ? bnames[2] : bnames[3];
+
+    const outputDir = path.join(outDir, mainName, subName);
+    if (!fs.existsSync(outputDir)) makeDirSync(outputDir);
+    const outputFilePath = path.join(outputDir, `${itemName}.png`);
+
+    if (!resultJson[mainName]) {
+      resultJson[mainName] = {};
+    }
+    if (!resultJson[mainName][subName]) {
+      resultJson[mainName][subName] = [];
+    }
+
+    const imgBlob = await svgToImage(fs.readFileSync(filepath, "utf8"));
+    const imgBuffer = await blobToBuffer(imgBlob);
+    await fs.promises.writeFile(outputFilePath, imgBuffer);
+
+    resultJson[mainName][subName].push({
+      output: `\\${itemName}`,
+      source: itemName,
+    });
+  }
+
+  const jsonOutPath = path.join(outDir, "result.json");
+  await fs.promises.writeFile(jsonOutPath, JSON.stringify(resultJson));
+}