From 407ee7ecfdd2dc0af5fd3f8cfd8e5487589f1b2d Mon Sep 17 00:00:00 2001
From: Otto <fa@ijust.cc>
Date: Sat, 28 Oct 2023 13:27:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=AA=84=E5=B1=8F?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C=EF=BC=8C=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=20banner=20=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/c-side-bar.vue |  2 +-
 pages/tools/canvas.vue    | 30 +++++++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/components/c-side-bar.vue b/components/c-side-bar.vue
index 8d7ce2e..dc79a2e 100644
--- a/components/c-side-bar.vue
+++ b/components/c-side-bar.vue
@@ -84,7 +84,7 @@
         </var-paper>
       </div>
       <var-paper
-        class="pt-2 mx-2 lg:mx-0 pb-6 text-center text-gray-800 dark:text-gray-100"
+        class="lg:pt-2 pt-0 mx-0 lg:mx-2 pb-6 text-center text-gray-800 dark:text-gray-100"
         :elevation="2"
       >
         <var-image width="50%" class="mx-auto" src="/boy.png" />
diff --git a/pages/tools/canvas.vue b/pages/tools/canvas.vue
index 4303664..5f28c93 100644
--- a/pages/tools/canvas.vue
+++ b/pages/tools/canvas.vue
@@ -134,6 +134,11 @@
             </div>
           </div>
 
+          <div class="space-y-2 w-full text-right">
+            <UiLabel for="config-person-url">小人图片</UiLabel>
+            <UiInput id="config-person-url" v-model="config.personUrl" />
+          </div>
+
           <div class="space-y-2 w-full text-right">
             <UiLabel for="config-text">标题内容</UiLabel>
             <UiTextarea id="config-text" v-model="config.text" />
@@ -159,7 +164,8 @@
         </UiCardContent>
         <UiCardFooter class="flex space-x-2 items-center">
           <!-- <UiButton @click="setTriangle">生成网格</UiButton> -->
-          <UiButton @click="onClickPng">生成截图</UiButton>
+          <UiButton @click="onClickJpg">生成 jpg截图</UiButton>
+          <UiButton @click="onClickPng">生成 png 截图</UiButton>
           <UiButton variant="destructive" @click="reset">重置</UiButton>
         </UiCardFooter>
       </UiCard>
@@ -210,12 +216,12 @@
 
       <p class="mt-2">生成的图片：</p>
 
-      <div class="space-y-2" ref="node"></div>
+      <div class="space-y-2" ref="node" id="gen-img"></div>
     </div>
   </ClientOnly>
 </template>
 <script lang="ts" setup>
-import { toJpeg } from "html-to-image";
+import { toJpeg, toPng, toSvg, toPixelData } from "html-to-image";
 import type { StyleValue } from "vue";
 
 const node = ref<HTMLDivElement>();
@@ -231,6 +237,7 @@ const defaultModel = () => ({
   background: "blue",
   hue: [160],
   personSize: [230],
+  personUrl: "/boy.png",
   text: "编写一个好标题",
   personY: [13],
   textY: [13],
@@ -336,10 +343,10 @@ const rollBackground = () => {
   }
 };
 
-const onClickPng = () => {
+const onClickJpg = () => {
   if (node.value && raw.value) {
     toJpeg(raw.value, {
-      quality: 0.9,
+      quality: 0.99,
     })
       .then(function (dataUrl) {
         var img = new Image();
@@ -351,6 +358,19 @@ const onClickPng = () => {
       });
   }
 };
+const onClickPng = () => {
+  if (node.value && raw.value) {
+    toPng(raw.value, {})
+      .then(function (dataUrl) {
+        var img = new Image();
+        img.src = dataUrl;
+        node.value!.appendChild(img);
+      })
+      .catch(function (error) {
+        console.error("oops, something went wrong!", error);
+      });
+  }
+};
 
 const reset = () => {
   // 清空 node.value 的 所有内容