diff --git a/index.html b/index.html index 8809202..fd0b526 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,6 @@
- + diff --git a/src/lib/ImageShow.svelte b/src/lib/ImageShow.svelte index 0282402..f936a73 100644 --- a/src/lib/ImageShow.svelte +++ b/src/lib/ImageShow.svelte @@ -73,6 +73,7 @@ "mdi mdi-crop", () => { image_process.roi_init(); + init_canvas(); show_image(); mask_tag = mask_tag ? false : true; }, @@ -87,13 +88,7 @@ ], ]), new LabelItem("文件操作", [ - [ - "保存到本地", - "mdi mdi-content-save-outline", - () => { - console.log(window.jimp); - }, - ], + ["保存到本地", "mdi mdi-content-save-outline", () => {}], ["打印图片", "mdi mdi-printer-outline"], ]), ]; @@ -103,6 +98,27 @@ canvas_width = window_width * 0.8125; } + function on_mask_close(e) { + mask_tag = false; + console.log(e); + if (e.detail.type === "cancel") { + return; + } else if (e.detail.type === "success") { + let scale = image.cols / e.detail.width; + let entry_area = Object.entries(e.detail.rect); + entry_area = entry_area.map((element) => { + return [element[0], element[1] * scale]; + }); + let crop_area = Object.fromEntries(entry_area); + console.log(entry_area); + image_process.crop_rect = crop_area; + image_for_show = image.roi(image_process.crop_rect); + image_process.roi_init(); + show_image(); + return; + } + } + function on_window_resize() { if (resize_tag) { clearTimeout(resize_tag); @@ -132,10 +148,30 @@ }, 40); } + function format_image(img) { + let dst = new cv.Mat(); + if (image_process.roi_tag) { + dst = img.roi(image_process.ROI_rect); + } else { + dst = img.clone(); + } + + if (image_process.text_strong) { + let cop = new cv.Mat(); + let kc = cv.Mat.ones(20, 20, cv.CV_8U); + cv.morphologyEx(img, cop, cv.MORPH_CLOSE, kc); + + cv.absdiff(img, cop, dst); + cv.bitwise_not(dst, dst); + kc.delete(); + cop.delete(); + } + return dst; + } + function show_image() { mask_tag = false; - let dst = new cv.Mat(); - console.time("image show"); + /*let dst = new cv.Mat(); if (image_process.roi_tag) { dst = image_for_show.roi(image_process.ROI_rect); } else { @@ -150,39 +186,21 @@ cv.absdiff(image_for_show, cop, image_for_show); cv.bitwise_not(image_for_show, image_for_show); dst = image_for_show; - } - + }*/ + let dst = format_image(image_for_show); let scale = Math.min(canvas_height / dst.rows, canvas_width / dst.cols); let dsize = new cv.Size(scale * dst.cols, scale * dst.rows); cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA); cv.imshow("canvas", dst); - - console.timeEnd("image show"); dst.delete(); } - async function init_canvas() { - let img = new Image(); - image_for_show = new cv.Mat(); - img.src = url; - img.onload = function () { - setTimeout(() => { - image = cv.imread(img); - cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0); - let pre_scale = Math.min( - canvas_height / image.rows, - canvas_width / image.cols - ); - let pre_dsize = new cv.Size( - pre_scale * image.cols, - pre_scale * image.rows - ); - cv.resize(image, image_for_show, pre_dsize, 0, 0, cv.INTER_AREA); - show_image(); - }, 50); - }; - } + let init_canvas = async (cb) => { + if (cb) { + cb(); + } + }; function wheel_event_handler(e) { e.preventDefault(); @@ -251,7 +269,30 @@ onMount(async () => { canvas_height = window_height - 64; canvas_width = (window_width * 13) / 16; - init_canvas(); + let img = new Image(); + img.src = url; + img.onload = function () { + setTimeout(() => { + init_canvas = async (call_back) => { + image = cv.imread(img); + cv.cvtColor(image, image, cv.COLOR_RGBA2RGB, 0); + let pre_scale = Math.min( + canvas_height / image.rows, + canvas_width / image.cols + ); + let pre_dsize = new cv.Size( + pre_scale * image.cols, + pre_scale * image.rows + ); + image_for_show = new cv.Mat(); + cv.resize(image, image_for_show, pre_dsize, 0, 0, cv.INTER_AREA); + if (call_back) { + call_back(); + } + }; + init_canvas(show_image); + }, 50); + }; }); onDestroy(async () => { @@ -304,13 +345,7 @@
{#if mask_tag} - { - mask_tag = false; - console.log(e); - }} - /> + {/if}