playground: optimize demos

playground/src/App.vue

@@ -1,25 +1,13 @@
 <template>
-  <canvas></canvas>
-  <video-demo></video-demo>
+  <text-demo></text-demo>
+  <div style="display: flex; justify-content: space-between; margin-top: 10px;">
+    <image-demo></image-demo>
+    <video-demo></video-demo>
+  </div>
 </template>
 
 <script setup>
-import { createTextImage } from '@sunny-117/text-image';
+import TextDemo from './TextDemo.vue'
+import ImageDemo from './ImageDemo.vue'
 import VideoDemo from './VideoDemo.vue'
-import {onMounted} from 'vue';
-
-onMounted(() => {
-  createTextImage({
-    canvas: document.querySelector('canvas'),
-    source: {
-      text: 'Text Image',
-    },
-  });
-})
-</script>
-
-<style scoped>
-.titleBox {
-  background-color: blueviolet;
-}
-</style>
+</script>

playground/src/ImageDemo.vue

@@ -0,0 +1,23 @@
+<template>
+  <canvas id="canvas2"></canvas>
+</template>
+
+<script setup>
+import { createTextImage } from "@sunny-117/text-image";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  const canvas = document.querySelector("#canvas2");
+  console.log(canvas)
+  createTextImage({
+    canvas,
+    raduis: 7,
+    isGray: true,
+    source: {
+      img: "../public/1.png",
+      width: 800,
+      height: 700,
+    },
+  });
+});
+</script>

playground/src/TextDemo.vue

@@ -0,0 +1,25 @@
+<template>
+  <canvas id="canvas1" style="width: 1000px;margin: 0 auto;"></canvas>
+</template>
+
+<script setup>
+import { createTextImage } from "@sunny-117/text-image";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  createTextImage({
+    canvas: document.querySelector("#canvas1"),
+    source: {
+      text: "Text Image",
+      width: 500,
+      height: 300,
+    },
+  });
+});
+</script>
+
+<style scoped>
+.titleBox {
+  background-color: blueviolet;
+}
+</style>

playground/src/VideoDemo.vue

@@ -1,16 +1,17 @@
 <template>
-  <canvas id="can1"></canvas>
-  <canvas id="can2"></canvas>
+  <canvas id="canvas3"></canvas>
 </template>
 <script setup>
 import { onMounted } from "vue";
 import { createTextImage } from "@sunny-117/text-image";
 onMounted(() => {
   createTextImage({
-    canvas: document.querySelector("#can1"),
+    canvas: document.querySelector("#canvas3"),
     replaceText: "6",
     source: {
       video: "../public/1.mp4",
+      width: 500,
+      height: 700,
     },
   });
 });

playground/src/index.css

@@ -0,0 +1,3 @@
+body {
+    overflow: hidden;
+}

playground/src/main.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
-
+import './index.css'
 createApp(App).mount('#app')