feat: 优化窄屏展示效果，补充 banner 参数

Otto-J · Oct 28, 2023 · 407ee7e · 407ee7e
1 parent 43f45e9
commit 407ee7e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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 的 所有内容