gm text

src/modules/test/router.js

@@ -0,0 +1,21 @@
+import MagickTest from "./views/MagickTest.vue";
+import TestHome from "./views/TestHome.vue";
+
+export default {
+  path: "/test",
+  name: "Test",
+  component: TestHome,
+  meta: {
+    noRequire: true,
+  },
+  children: [
+    {
+      path: "magick-test",
+      name: "MagickTest",
+      component: MagickTest,
+      meta: {
+        noRequire: true,
+      },
+    },
+  ],
+};

src/modules/test/views/MagickTest.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="magick-test">
+    <h2>magick-test</h2>
+    <el-form label-width="60px">
+      <el-form-item label="图片" prop="sourceFilePath">
+        <el-input
+          style="width: 80%"
+          v-model="modalForm.sourceFilePath"
+          placeholder="请选择资源文件"
+          readonly
+        ></el-input>
+        <el-button
+          type="primary"
+          style="margin-left: 10px"
+          @click="toSelectSourceFilePath"
+        >
+          选择
+        </el-button>
+        <div v-if="sourceFilePath">
+          <img :src="sourceFilePath" style="width: 260px" />
+        </div>
+      </el-form-item>
+      <el-form-item label="结果">
+        <div v-if="resultFilePath">
+          <img :src="resultFilePath" style="width: 260px" />
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="toCrop">裁剪图片</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getTmpDir } from "@/plugins/env";
+import gm from "@/plugins/gm";
+import { randomCode, formatDate } from "@/plugins/utils";
+
+const { dialog } = window.nodeRequire("electron").remote;
+const path = window.nodeRequire("path");
+
+export default {
+  name: "magick-test",
+  data() {
+    return {
+      modalForm: {
+        sourceFilePath:
+          "/Users/chulin/develop/workspace/tcs/paper-library-client/stores/tmp/0-封面@1x.png",
+        resultFilePath: "",
+      },
+    };
+  },
+  computed: {
+    sourceFilePath() {
+      return this.modalForm.sourceFilePath
+        ? `file:///${this.modalForm.sourceFilePath}`
+        : "";
+    },
+    resultFilePath() {
+      return this.modalForm.resultFilePath
+        ? `file:///${this.modalForm.resultFilePath}`
+        : "";
+    },
+  },
+  methods: {
+    toSelectSourceFilePath() {
+      dialog
+        .showOpenDialog({
+          title: "请选择图片",
+          properties: ["openFile"],
+          filters: [
+            {
+              name: "img",
+              extensions: ["jpg", "png"],
+            },
+          ],
+        })
+        .then(({ canceled, filePaths }) => {
+          if (canceled) return;
+          this.modalForm.sourceFilePath = filePaths[0];
+        });
+    },
+    toCrop() {
+      const tmpFile = path.join(
+        getTmpDir(),
+        `${formatDate("YYYYMMDDHHmmss")}_${randomCode(8)}.png`
+      );
+      const imgObj = gm(this.modalForm.sourceFilePath);
+      // 裁剪条形码区域
+      imgObj.crop(300, 300, 0, 0).write(tmpFile, (err) => {
+        if (err) {
+          console.dir(err);
+          this.$message.error("裁剪失败");
+          return;
+        }
+
+        this.modalForm.resultFilePath = tmpFile;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.magick-test h2 {
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+</style>

src/modules/test/views/TestHome.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="test-home">
+    <ul>
+      <li>
+        <router-link :to="{ name: 'MagickTest' }"
+          ><span>magick 测试</span></router-link
+        >
+      </li>
+      <li @click="goback">返回</li>
+    </ul>
+    <div class="test-home-body">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "test-home",
+  data() {
+    return {};
+  },
+  methods: {
+    goback() {
+      this.$router.push({ name: "Login" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.test-home ul {
+  padding: 10px 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.test-home li {
+  display: inline-block;
+  vertical-align: middle;
+  background: #f0f0f0;
+  padding: 10px;
+  margin: 0 10px 0 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.test-home li:hover {
+  background-color: #d0d0d0;
+}
+.test-home-body {
+  padding: 15px;
+}
+</style>

src/plugins/env.js

@@ -39,6 +39,10 @@ function getExtraDir(name) {
   return path.join(extraPath, name);
 }
 
+function getImagicTool() {
+  return path.join(getExtraDir("ImageMagick"), "/");
+}
+
 function getImgDecodeTool() {
   return path.join(getExtraDir("zxingA"), "zxing.exe");
 }
@@ -108,6 +112,7 @@ export {
   getHomeDir,
   getStoresDir,
   getExtraDir,
+  getImagicTool,
   getImgDecodeTool,
   getInputDir,
   getOutputDir,

src/plugins/gm.js

@@ -1,13 +1,21 @@
-import { getExtraDir } from "./env";
+import { getImagicTool } from "./env";
 
 // mac开发时可以下载mac版的 imagemagick 程序包
 // 并在.env.development.local中设置 VUE_APP_MAGICK_TOOL_PATH 参数
-// imagemagick下载地址：https://download.imagemagick.org/script/download.php#macosx
-// 本开发项目中只包含dwindwo版的 imagemagick
-// gm doc:https://github.com/aheckmann/gm#readme
-const gm = window.nodeRequire("gm").subClass({
+// 参考gm doc:https://github.com/aheckmann/gm#readme
+// 安装：brew install imagemagick
+
+// windows版 imagemagick 下载地址：https://download.imagemagick.org/script/download.php#windows
+// 本开发项目中只包含 windows 版的 imagemagick
+
+// console.log(process.env.VUE_APP_MAGICK_TOOL_PATH);
+let config = {
   imageMagick: true,
-  appPath: process.env.VUE_APP_MAGICK_TOOL_PATH || getExtraDir("imagemagick/"),
-});
+};
+if (!process.env.VUE_APP_MAGICK_TOOL_PATH) {
+  config.appPath = getImagicTool();
+}
+
+const gm = window.nodeRequire("gm").subClass(config);
 
 export default gm;

src/plugins/scanner.js

@@ -6,14 +6,14 @@ const childProcessExec = util.promisify(childProcess.exec);
 const isWindowsPlatform = process.platform === "win32";
 
 export function setScanner() {
-  if (!isWindowsPlatform) return;
+  if (!isWindowsPlatform) return Promise.resolve(true);
   const commandStr = `${getScanExePath()} -settings`;
   console.log(commandStr);
   return childProcessExec(commandStr);
 }
 
 export function evokeScanner(inputDir) {
-  if (!isWindowsPlatform) return;
+  if (!isWindowsPlatform) return Promise.resolve(true);
 
   const commandStr = `${getScanExePath()} -scan -d${inputDir}`;
   // console.log(commandStr);

src/router.js

@@ -5,6 +5,7 @@ import Home from "./views/Home";
 // modules
 import login from "./modules/login/router";
 import client from "./modules/client/router";
+import test from "./modules/test/router";
 
 Vue.use(Router);
 /**
@@ -29,6 +30,7 @@ let router = new Router({
       redirect: { name: "TaskManage" },
       children: [...client],
     },
+    { ...test },
     // [lazy-loaded] route level code-splitting
     // {
     //   path: "/about",

src/views/Layout.vue

@@ -32,6 +32,11 @@
       <div class="home-footer-ip">
         <i class="el-icon-monitor"></i><span>{{ domain || "0.0.0.0" }}</span>
       </div>
+      <div v-if="isDev">
+        <router-link :to="{ name: 'MagickTest' }"
+          ><span>功能测试</span></router-link
+        >
+      </div>
       <div class="home-footer-version">版本号：{{ version }}</div>
     </div>
   </div>

vue.config.js

@@ -17,13 +17,13 @@ module.exports = defineConfig({
           "config.sample.json",
           "extra/imagemagick/**",
           "extra/zxing/**",
-          "extra/zxingA/**"
+          "extra/zxingA/**",
         ],
         win: {
           target: "portable",
-          signAndEditExecutable: false
-        }
-      }
-    }
-  }
+          signAndEditExecutable: false,
+        },
+      },
+    },
+  },
 });