feat(ImageShow.svelte-utils.js): save image to disk

BREAKING CHANGE:

package.json

@@ -18,6 +18,7 @@
     "bulma": "^0.9.4",
     "fabric": "^5.2.4",
     "jimp": "^0.16.2",
+    "moment": "^2.29.4",
     "sass": "^1.56.1",
     "uuid": "^9.0.0"
   }

src/lib/ImageShow.svelte

@@ -1,15 +1,18 @@
 <script>
+  import moment from "moment";
   import { onMount, onDestroy } from "svelte";
 
   import Navbar from "./Navbar.svelte";
   import Mask from "./Mask.svelte";
-  import { ImageProcess } from "./utils";
+  import { ImageProcess, download_image } from "./utils";
 
   const cv = window.cv;
   let image_process = new ImageProcess();
 
   export let url = "test.jpg";
 
+  moment.locale("zh-cn");
+
   let canvas_dom;
   let resize_tag;
   let image;
@@ -47,7 +50,6 @@
         "mdi mdi-file-rotate-left-outline",
         () => {
           image_process.turn_left();
-          cv.rotate(image_for_show, image_for_show, 0);
           show_image();
         },
       ],
@@ -56,7 +58,6 @@
         "mdi mdi-file-rotate-right-outline",
         () => {
           image_process.turn_right();
-          cv.rotate(image_for_show, image_for_show, 2);
           show_image();
         },
       ],
@@ -83,12 +84,21 @@
         "mdi mdi-alpha-x-circle-outline",
         () => {
           image_process.recover();
-          init_canvas();
+          init_canvas(show_image);
         },
       ],
     ]),
     new LabelItem("文件操作", [
-      ["保存到本地", "mdi mdi-content-save-outline", () => {}],
+      [
+        "保存到本地",
+        "mdi mdi-content-save-outline",
+        () => {
+          get_image_buffer().then((b_img) => {
+            let now = moment();
+            download_image(b_img, now.format("YYYY-MM-DD") + ".jpg");
+          });
+        },
+      ],
       ["打印图片", "mdi mdi-printer-outline"],
     ]),
   ];
@@ -98,6 +108,20 @@
     canvas_width = window_width * 0.8125;
   }
 
+  async function get_image_buffer() {
+    const jimp = window.jimp;
+    let dst = format_image(image);
+    cv.cvtColor(image, image, cv.COLOR_RGB2RGBA, 0);
+    let k = new jimp({
+      width: dst.cols,
+      height: dst.rows,
+      data: dst.data,
+    });
+    let base64_image = await k.getBase64Async(jimp.MIME_JPEG);
+    dst.delete();
+    return base64_image;
+  }
+
   function on_mask_close(e) {
     mask_tag = false;
     console.log(e);
@@ -166,6 +190,9 @@
       kc.delete();
       cop.delete();
     }
+    if (image_process.rotate_tag >= 0) {
+      cv.rotate(dst, dst, image_process.rotate_tag);
+    }
     return dst;
   }
 

src/lib/utils.js

@@ -210,3 +210,28 @@ export function ImageProcess() {
     this.crop_rect = rect;
   };
 }
+
+function base64_to_blob(base64_data) {
+  let arr = base64_data.split(","),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = Buffer.from(arr[1], "base64")
+  return new Blob([bstr], { type: mime });
+}
+
+function download_file(url, name) {
+  var a = document.createElement("a");
+  a.setAttribute("href", url);
+  a.setAttribute("download", name);
+  a.setAttribute("target", "_blank");
+  a.addEventListener("click", ()=>{
+    console.log("download")
+  }, false);
+  a.click();
+}
+
+export function download_image(base64, name) {
+  var blob = base64_to_blob(base64);
+  var url = URL.createObjectURL(blob);
+  download_file(url, name);
+}
+