[png]: module of png export done!

package.json

@@ -9,10 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "html2canvas": "^1.4.1",
     "oh-vue-icons": "^1.0.0-rc3",
     "swiper": "^9.2.3",
     "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vue3-toastify": "^0.1.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/components/Generator/ElementTypeSidebar.vue

@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+
+import html2canvas from "html2canvas";
+
 import Head from "./elements/Head/Head.svg";
 import Top from "./elements/Tops/Styled.svg";
 import Mouth from "./elements/Mouths/Smile.svg";
@@ -89,27 +94,79 @@ const initElementType = (): void => {
 };
 
 initElementType();
+
+const copyCurrentURL = (): void => {
+  navigator.clipboard.writeText(window.location.href);
+
+  toast.success("Copied to clipboard! 👍");
+};
+
+const exportAsPNG = () => {
+  const character = document.getElementById("character") as HTMLElement;
+
+  html2canvas(character, {
+    backgroundColor: null,
+  })
+    .then((canvas) => {
+      const image = canvas.toDataURL("image/png");
+
+      const link = document.createElement("a");
+      link.download = "character.png";
+      link.href = image;
+      link.click();
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
 </script>
 
 <template>
-  <div class="generator-sidebar">
-    <h2 class="mb-3 text-xs font-medium uppercase">Element types:</h2>
-    <ul class="flex flex-col gap-2">
-      <li
-        v-for="(item, index) in items"
-        :key="`element-${index}`"
-        class="flex items-center gap-4 hover:opacity-50 ease-linear duration-150 bg-zinc-800 py-2 px-4 rounded-md cursor-pointer"
-        :class="[{ '!bg-violet-700': elementSelected(item) }]"
-        @click="setElementType(item)"
+  <div class="generator-sidebar flex flex-col justify-between">
+    <div class="flex flex-col gap-1">
+      <h2 class="mb-3 text-xs font-medium uppercase">Element types:</h2>
+      <ul class="flex flex-col gap-2">
+        <li
+          v-for="(item, index) in items"
+          :key="`element-${index}`"
+          class="flex items-center gap-4 hover:opacity-50 ease-linear duration-150 bg-zinc-800 py-2 px-4 rounded-md cursor-pointer"
+          :class="[{ '!bg-violet-700': elementSelected(item) }]"
+          @click="setElementType(item)"
+        >
+          <img :src="item.icon" alt="" class="w-6 h-6" />
+          <span> {{ item.name }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <p class="text-center">
+        Your current session is being saved automatically in URL 👌
+      </p>
+
+      <button
+        class="py-2 px-4 bg-transparent border border-violet-700 rounded-xl hover:opacity-50 ease-linear duration-150 relative"
+        @click="copyCurrentURL"
+      >
+        Copy URL
+
+        <v-icon
+          name="fa-file-export"
+          class="absolute right-3 -translate-y-1/2 top-1/2"
+        />
+      </button>
+
+      <button
+        class="py-2 px-4 bg-violet-700 rounded-xl hover:opacity-50 ease-linear duration-150 relative"
+        @click="exportAsPNG"
       >
-        <img :src="item.icon" alt="" class="w-6 h-6" />
-        <span> {{ item.name }}</span>
-      </li>
-    </ul>
+        Export as PNG
+
+        <v-icon
+          name="fa-file-export"
+          class="absolute right-3 -translate-y-1/2 top-1/2"
+        />
+      </button>
+    </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.generator-sidebar {
-}
-</style>

src/components/Generator/index.vue

@@ -126,7 +126,7 @@ initCharacter();
       <ElementTypeSidebar @set-element-type="setElementType" />
 
       <div class="generator__main flex flex-col gap-3">
-        <div class="generator__character">
+        <div id="character" class="generator__character">
           <div class="absolute generator__character__head element">
             <img :src="character?.Head" alt="" />
           </div>
@@ -159,7 +159,10 @@ initCharacter();
             <img :src="character?.Background" alt="" />
           </div>
 
-          <div class="absolute generator__character__pet element">
+          <div
+            v-if="character.Pet"
+            class="absolute generator__character__pet element"
+          >
             <img :src="character?.Pet" alt="" />
           </div>
         </div>

src/main.ts

@@ -7,8 +7,9 @@ import router from "./router";
 app.use(router);
 
 import { OhVueIcon, addIcons } from "oh-vue-icons";
-import { FaChevronRight } from "oh-vue-icons/icons";
-addIcons(FaChevronRight);
+import { FaChevronRight, FaSave, FaFileExport } from "oh-vue-icons/icons";
+
+addIcons(FaChevronRight, FaSave, FaFileExport);
 app.component("v-icon", OhVueIcon);
 
 const loadSystemTheme = () => {