feat(工具箱/二维码解析和生成): 添加生成二维码功能

src/views/ToolboxView/Conversion/QrcodeReaderAndGenerator.vue

@@ -3,6 +3,14 @@
 
     <!-- 解析二维码 -->
     <n-card size="small" title="解析二维码">
+      <template #header-extra>
+        <n-button
+          type="error"
+          :disabled="!readerData.dataURL"
+          :text="true"
+          @click="handleClearReader"
+        >清空</n-button>
+      </template>
       <n-form
         class="form-no-feedback"
         label-align="left"
@@ -58,13 +66,94 @@
     </n-card>
 
     <!-- 生成二维码 -->
-    <n-card v-if="false" size="small" title="生成二维码">
+    <n-card size="small" title="生成二维码">
+      <template #header-extra>
+        <n-flex>
+          <n-button
+            type="primary"
+            :disabled="!writerData.content"
+            :text="true"
+            @click="handleGenerateQrCode"
+          >生成</n-button>
+          <n-button
+            type="primary"
+            :disabled="!writerData.dataURL"
+            :text="true"
+            @click="handleDownloadQrCode"
+          >下载</n-button>
+          <n-button
+            type="error"
+            :disabled="!writerData.dataURL"
+            :text="true"
+            @click="handleClearWriter"
+          >清空</n-button>
+        </n-flex>
+      </template>
       <n-form
-        class="form-no-feedback"
-        label-align="right"
+        class="form-no-feedback writer-config"
+        label-align="left"
         label-placement="top"
         label-width="auto"
-      ></n-form>
+      >
+
+        <n-form-item label="文本内容">
+          <n-input
+            v-model:value="writerData.content"
+            placeholder="请输入需要生成的二维码文本内容"
+            type="textarea"
+            :rows="4"
+          ></n-input>
+        </n-form-item>
+
+        <n-form-item label="分辨率">
+          <n-flex align="center">
+            <n-input-number
+              v-model:value="writerData.resolution"
+              :min="64"
+              :max="8192"
+              :step="1"
+            ></n-input-number>
+            <span>px</span>
+          </n-flex>
+        </n-form-item>
+
+        <n-form-item label="颜色">
+          <n-flex align="center">
+            <span>前景颜色：</span>
+            <n-color-picker
+              v-model:value="writerData.colorForeground"
+              :modes="['hex']"
+              :show-alpha="true"
+              :show-preview="true"
+              :swatches="['#00000000', '#000000FF', '#FFFFFFFF']"
+            />
+            <span>背景颜色：</span>
+            <n-color-picker
+              v-model:value="writerData.colorBackground"
+              :modes="['hex']"
+              :show-alpha="true"
+              :show-preview="true"
+              :swatches="['#00000000', '#000000FF', '#FFFFFFFF']"
+            />
+          </n-flex>
+        </n-form-item>
+
+        <n-form-item label="二维码预览">
+          <div class="writer-preview">
+            <div class="writer-preview__wrapper">
+              <n-image
+                v-show="writerData.dataURL"
+                object-fit="contain"
+                width="100%"
+                height="100%"
+                :preview-disabled="true"
+                :src="writerData.dataURL"
+              />
+            </div>
+          </div>
+        </n-form-item>
+
+      </n-form>
     </n-card>
 
   </div>
@@ -72,9 +161,9 @@
 
 <script setup>
 import {
-  NCard, NFlex, NForm, NFormItem,
-  NImage, NLi, NOl,
-  NUpload, NUploadDragger,
+  NButton, NCard, NColorPicker, NFlex,
+  NForm, NFormItem, NInput, NInputNumber,
+  NImage, NLi, NOl, NUpload, NUploadDragger,
 } from 'naive-ui';
 
 import {
@@ -86,7 +175,7 @@ import {
 } from '@/assets/js/naive-ui';
 
 import {
-  readQrCodeImage,
+  readQrCodeImage, writeQrCodeImage,
 } from '@/assets/js/qr-code';
 
 /** 二维码解析相关数据 */
@@ -103,9 +192,75 @@ const readerData = reactive({
 
 });
 
-// /** 二维码生成相关数据 */
-// const writerData = reactive({
-// });
+/** 二维码生成相关数据 */
+const writerData = reactive({
+
+  /** 背景颜色 */
+  colorBackground: '#FFFFFF',
+
+  /** 前景颜色 */
+  colorForeground: '#000000',
+
+  /** 文本内容 */
+  content: '',
+
+  /** 图片 DataURL */
+  dataURL: '',
+
+  /** 分辨率 */
+  resolution: 256,
+
+});
+
+/** 清空信息 */
+function handleClearReader() {
+  readerData.dataURL = '';
+  readerData.results = [];
+}
+
+/** 清空信息 */
+function handleClearWriter() {
+  writerData.content = '';
+  writerData.dataURL = '';
+  writerData.resolution = 256;
+}
+
+/** 处理下载二维码 */
+function handleDownloadQrCode() {
+
+  let url = writerData.dataURL;
+  let element = document.createElement('a');
+
+  if (url) {
+    element.download = '二维码.png';
+    element.href = url;
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  }
+
+}
+
+/** 处理生成二维码 */
+function handleGenerateQrCode() {
+  return writeQrCodeImage({
+    content: writerData.content,
+    background: writerData.colorBackground,
+    foreground: writerData.colorForeground,
+    width: writerData.resolution,
+    height: writerData.resolution,
+  }).then((dataURL) => {
+
+    if (dataURL) {
+      $message.success('生成二维码成功');
+    } else {
+      $message.error('生成二维码失败');
+    }
+
+    writerData.dataURL = dataURL;
+
+  });
+}
 
 /**
  * @description 处理选择图片
@@ -162,4 +317,27 @@ function handleSelectQrImage(options) {
     user-select: text;
   }
 }
+
+.writer-config {
+  .n-color-picker {
+    width: 128px;
+  }
+}
+
+.writer-preview {
+  width: 100%;
+
+  .writer-preview__wrapper {
+    display: flex;
+    width: 256px;
+    height: 256px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+
+    .n-image {
+      margin: auto;
+      image-rendering: pixelated;
+    }
+  }
+}
 </style>