feat(ImageShow.svelte-&-utils.js): add canvas support by fabric

BREAKING CHANGE:

package.json

@@ -17,6 +17,7 @@
     "@mdi/font": "^7.0.96",
     "bulma": "^0.9.4",
     "fabric": "^5.2.4",
+    "jimp": "^0.16.2",
     "sass": "^1.56.1",
     "uuid": "^9.0.0"
   }

src/lib/ImageShow.svelte

@@ -1,9 +1,15 @@
 <script>
   import { v4 as uuidv4 } from "uuid";
   import { onMount } from "svelte";
+
   import { fabric } from "fabric";
 
   import Navbar from "./Navbar.svelte";
+  import { ImageProcessing } from "./utils";
+
+  export let url = "test.jpg";
+
+  let img_process = new ImageProcessing();
 
   let canvas_dom;
   let canvas;
@@ -50,11 +56,17 @@
 
   function resize() {
     setTimeout(() => {
+      console.log("test");
       canvas_height = window_height - 64;
       canvas_width = (window_width * 13) / 16;
-      canvas.setWidth(canvas_width);
-      canvas.setHeight(canvas_height);
-      fabric.Image.fromURL("test.jpg", function (oImg) {
+      let scale = Math.min(
+        canvas_height / image.height,
+        canvas_width / image.width
+      );
+      canvas.setWidth(image.width * scale);
+      canvas.setHeight(image.height * scale);
+      image.scale(scale);
+      /*fabric.Image.fromURL("test.jpg", function (oImg) {
         let scale = Math.min(
           canvas_height / oImg.height,
           canvas_width / oImg.width
@@ -62,27 +74,32 @@
         oImg.scale(scale);
         oImg.set("selectable", false);
         canvas.add(oImg);
-      });
+      });*/
     }, 50);
   }
 
-  function init_canvas() {
-    canvas = new fabric.StaticCanvas(canvas_dom, {
-      width: canvas_width,
-      height: canvas_height,
-    });
-    canvas.set("selectable", false);
-    fabric.Image.fromURL("test.jpg", function (oImg) {
-      let scale = Math.min(
-        canvas_height / oImg.height,
-        canvas_width / oImg.width
-      );
-      oImg.scale(scale);
-      canvas.add(oImg);
-    });
+  async function init_canvas() {
+    let img = new Image();
+    img.src = await img_process.init_image(url);
+    img.onload = function () {
+      setTimeout(() => {
+        canvas = new fabric.StaticCanvas(canvas_dom);
+        image = new fabric.Image(img);
+        let scale = Math.min(
+          canvas_height / image.height,
+          canvas_width / image.width
+        );
+        image.scale(scale);
+        canvas.setWidth(image.width * scale);
+        canvas.setHeight(image.height * scale);
+
+        canvas.add(image);
+        console.log(image.getSrc().toString());
+      }, 50);
+    };
   }
 
-  onMount(() => {
+  onMount(async () => {
     canvas_height = window_height - 64;
     canvas_width = (window_width * 13) / 16;
     init_canvas();
@@ -124,7 +141,7 @@
         {/each}
       </aside>
     </div>
-    <div class="column">
+    <div class="column" style="text-align:center">
       <canvas
         bind:this={canvas_dom}
         width={canvas_width}

src/lib/utils.js

@@ -1,4 +1,5 @@
 import procedure from "../assets/Procedure.json";
+import jimp from "jimp";
 
 export function Operation(step) {
   this.step = step;
@@ -26,3 +27,16 @@ export function Operation(step) {
     return procedure.find((e) => e.id === this.step).color;
   };
 }
+
+export function ImageProcessing() {
+  this.init_image = async (url) => {
+    const image = await jimp.read(url);
+    return image.getBase64Async(jimp.MIME_PNG);
+  };
+
+  this.rotate = async (url, angle) => {
+    const image = await jimp.read(url);
+    image.rotate(angle);
+    return image.getBase64Async(jimp.MIME_PNG);
+  };
+}

vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()]
-})
+  plugins: [svelte()],
+});