add Fabric

package.json

@@ -28,6 +28,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "fabric": "^6.5.1",
     "pinia": "^2.2.6",
     "twemoji": "^14.0.2",
     "vite-plugin-vuetify": "^2.0.4",
@@ -54,7 +55,7 @@
     "eslint-plugin-playwright": "^2.0.1",
     "eslint-plugin-vue": "^9.31.0",
     "jsdom": "^25.0.1",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
     "typescript": "~5.6.3",
     "vite": "^5.4.11",

src/components/InputItem.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-import { getFullTitle } from '@/utils/misc'
 import { useGenericStore } from '@/stores/generic'
 
 const store = useGenericStore(),
@@ -18,12 +17,14 @@ const store = useGenericStore(),
   }>(),
   emit = defineEmits<{
     updateBackground: [b: string]
+    savePNG: []
   }>()
 const onNewBackground = function () {
     console.log(inputBackground.value!.files![0])
     const reader = new FileReader()
     reader.onloadend = function () {
       emit('updateBackground', reader.result as string)
+      // store.replacePhoto(reader.result as string)
     }
     reader.readAsDataURL(inputBackground.value!.files![0])
   },
@@ -37,12 +38,13 @@ const onNewBackground = function () {
       })
   },
   savePNG = function () {
-    const data = props.canvasModel!.toDataURL('image/png'),
-      a = document.createElement('a')
-    a.download = `${getFullTitle(store.title, store.subtitle)}.png`
-    a.href = data
-    a.click()
-    console.info(`Zapis do pliku ${getFullTitle(store.title, store.subtitle)}.png`)
+    emit('savePNG')
+    // const data = props.canvasModel!.toDataURL('image/png'),
+    //   a = document.createElement('a')
+    // a.download = `${getFullTitle(store.title, store.subtitle)}.png`
+    // a.href = data
+    // a.click()
+    // console.info(`Zapis do pliku ${getFullTitle(store.title, store.subtitle)}.png`)
   },
   chooseBackground = function () {
     if (inputBackground.value) {

src/stores/counter.ts

@@ -4,9 +4,9 @@ import { defineStore } from 'pinia'
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0),
     doubleCount = computed(() => count.value * 2),
-   increment = function () {
-    count.value++
-  }
+    increment = function () {
+      count.value++
+    }
 
   return { count, doubleCount, increment }
 })

src/stores/generic.ts

@@ -1,12 +1,13 @@
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { defineStore } from 'pinia'
+// import type { FabricImage } from 'fabric'
 
 export const useGenericStore = defineStore('generic', () => {
-  // let canvas = "";
+  // const canvas = ref(new StaticCanvas())
   // let thumbnailWidth = ref(0);
   // let thumbnailHeight = ref(0);
 
-  // const photo = ref('')
+  // const photo: Ref<FabricImage | null> = ref(null)
   const photoScale = ref(1.0)
   const photoLeft = ref(0)
   const photoTop = ref(0)
@@ -26,6 +27,7 @@ export const useGenericStore = defineStore('generic', () => {
   const time = ref('')
 
   return {
+    // canvas,
     // photo,
     photoScale,
     photoLeft,

src/utils/misc.ts

@@ -1,3 +1,5 @@
+import { FabricImage, filters } from 'fabric'
+
 const getFullTitle = function (title: string, ...subtitle: string[]): string {
     if (
       title.length === 0 &&
@@ -16,24 +18,14 @@ const getFullTitle = function (title: string, ...subtitle: string[]): string {
     }
     return fullTitle
   },
-  drawBackground = function (
-    ctx: CanvasRenderingContext2D,
-    backgroundImage: HTMLImageElement,
-    scale: number,
-    left: number,
-    top: number
-  ): void {
-    const halfWidth = ctx.canvas.width / 2,
-      halfHeight = ctx.canvas.height / 2,
-      imageWidth = backgroundImage.width,
-      imageHeight = backgroundImage.height
-    ctx.drawImage(
-      backgroundImage,
-      halfWidth - (imageWidth / 2) * scale + left,
-      halfHeight - (imageHeight / 2) * scale + top,
-      imageWidth * scale,
-      imageHeight * scale
-    )
+  newLanczos = function (image: FabricImage): filters.Resize {
+    const scale = image.scaleX
+    return new filters.Resize({
+      scaleX: scale,
+      scaleY: scale,
+      resizeType: 'lanczos',
+      lanczosLobes: 3
+    })
   }
 
-export { getFullTitle, drawBackground }
+export { getFullTitle, newLanczos }