feat(ImageShow.svelte): some handle

like image rotate and resize but not complete

BREAKING CHANGE:

src/lib/ImageShow.svelte

@@ -1,16 +1,13 @@
 <script>
   import { v4 as uuidv4 } from "uuid";
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
 
   import Navbar from "./Navbar.svelte";
-  import { ImageProcessing } from "./utils";
 
   const cv = window.cv;
 
   export let url = "test.jpg";
 
-  let img_process = new ImageProcessing();
-
   let canvas_dom;
   let canvas;
   let image;
@@ -39,20 +36,14 @@
     new LabelItem("采集操作", [
       ["确认并返回", "mdi mdi-checkbox-marked-circle-outline"],
       ["重新采集", "mdi mdi-reply-outline"],
-      ["取消", "mdi mdi-alpha-x-circle-outline"],
     ]),
     new LabelItem("图像操作", [
-      [
+      ["向左旋转", "mdi mdi-file-rotate-left-outline", () => {}],
-        "向左旋转",
-        "mdi mdi-file-rotate-left-outline",
-        () => {
-          image.rotate(90);
-        },
-      ],
       ["向右旋转", "mdi mdi-file-rotate-right-outline"],
       ["文本加强", "mdi mdi-image-filter-center-focus-strong"],
       ["裁剪", "mdi mdi-crop"],
       ["滚轮缩放", "mdi mdi-loupe"],
+      ["取消", "mdi mdi-alpha-x-circle-outline"],
     ]),
     new LabelItem("文件操作", [
       ["保存到本地", "mdi mdi-content-save-outline"],
@@ -65,7 +56,7 @@
     canvas_width = window_width * 0.8125;
   }
 
-  function resize() {
+  function on_window_resize() {
     /*setTimeout(() => {
       let scale = Math.min(
         canvas_height / image.height,
@@ -79,24 +70,70 @@
     }, 50);*/
   }
 
+  function rotate(img, angle) {
+    let dst = new cv.Mat();
+    let dsize = new cv.Size(img.rows, img.cols);
+    let center = new cv.Point(img.cols / 2, img.rows / 2);
+    let M = cv.getRotationMatrix2D(center, angle, 1);
+    cv.warpAffine(
+      img,
+      dst,
+      M,
+      dsize,
+      cv.INTER_LINEAR,
+      cv.BORDER_CONSTANT,
+      new cv.Scalar()
+    );
+    return dst;
+  }
+
+  function resize(img, scale) {
+    let dst = new cv.Mat();
+    let dsize = new cv.Size(scale * img.cols, scale * img.rows);
+
+    cv.resize(img, dst, dsize, 0, 0, cv.INTER_AREA);
+    return dst;
+  }
+
+  function show_image(img, { option = {} }) {
+    if (option.hasOwnProperty("angle")) {
+    }
+
+    let dst = img.clone();
+    for (const [key, value] of Object.entries(option)) {
+      if (key === "resize") {
+        let scale = Math.min(
+          canvas_height / image.height,
+          canvas_width / image.width
+        );
+        dst = resize(dst, scale);
+        console.log(dst);
+      }
+      if (key === "rotate") {
+        dst = rotate
+      }
+    }
+
+    cv.imshow("canvas", dst);
+    dst.delete;
+  }
+
   async function init_canvas() {
     let img = new Image();
     img.src = url;
     img.onload = function () {
       setTimeout(() => {
-        setTimeout(() => {
+        image = cv.imread(img);
-          image = cv.imread(img);
+        let scale = Math.min(
-          let scale = Math.min(
+          canvas_height / image.rows,
-            canvas_height / image.rows,
+          canvas_width / image.cols
-            canvas_width / image.cols
+        );
-          );
+        let dst = new cv.Mat();
-          let dst = new cv.Mat();
+        let dsize = new cv.Size(scale * image.cols, scale * image.rows);
-          let dsize = new cv.Size(scale * image.cols, scale * image.rows);
 
-          cv.resize(image, dst,  dsize, 0, 0, cv.INTER_AREA);
+        cv.resize(image, dst, dsize, 0, 0, cv.INTER_AREA);
-          cv.imshow("canvas", dst);
+        cv.imshow("canvas", dst);
-          console.log(cv.im(".jpg", image).toString("base64"));
+        /*  image = new fabric.Image(img);
-          /*  image = new fabric.Image(img);
           let scale = Math.min(
             canvas_height / image.height,
             canvas_width / image.width
@@ -107,8 +144,7 @@
           canvas.setHeight(image.height * scale);
           canvas.add(image);
           console.log(image);*/
-        }, 50);
+      }, 50);
-      });
     };
   }
 
@@ -118,12 +154,18 @@
     init_canvas();
     console.log(window);
   });
+
+  onDestroy(async () => {
+    if (image.delete) {
+      image.delete();
+    }
+  });
 </script>
 
 <svelte:window
   bind:innerHeight={window_height}
   bind:innerWidth={window_width}
-  on:resize={resize}
+  on:resize={on_window_resize}
 />
 
 <div class="disable-selection">

src/lib/utils.js

@@ -1,7 +1,5 @@
 import procedure from "../assets/Procedure.json";
 
-const jimp = window.jimp;
-
 export function Operation(step) {
   this.step = step;
 
@@ -27,17 +25,4 @@ export function Operation(step) {
   this.get_color = () => {
     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);
-  };
-}