songsenand
/
msclient
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ImageShow.svelte): write image to disk 

BREAKING CHANGE:
This commit is contained in:
songsenand 2023-01-22 12:08:44 +08:00
parent 9a2f7f0587
commit 89b2a2bdd5
3 changed files with 80 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -9,6 +9,6 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<script src="/src/opencv.js"></script> <script async src="/src/opencv.js" type="text/javascript"></script>
</body> </body>
</html> </html>

117
src/lib/ImageShow.svelte
View File

@ -73,6 +73,7 @@
"mdi mdi-crop", "mdi mdi-crop",
() => { () => {
image_process.roi_init(); image_process.roi_init();
init_canvas();
show_image(); show_image();
mask_tag = mask_tag ? false : true; mask_tag = mask_tag ? false : true;
}, },
@ -87,13 +88,7 @@
], ],
]), ]),
new LabelItem("文件操作", [ new LabelItem("文件操作", [
[ ["保存到本地", "mdi mdi-content-save-outline", () => {}],
"保存到本地",
"mdi mdi-content-save-outline",
() => {
console.log(window.jimp);
},
],
["打印图片", "mdi mdi-printer-outline"], ["打印图片", "mdi mdi-printer-outline"],
]), ]),
]; ];
@ -103,6 +98,27 @@
canvas_width = window_width * 0.8125; 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() { function on_window_resize() {
if (resize_tag) { if (resize_tag) {
clearTimeout(resize_tag); clearTimeout(resize_tag);
@ -132,10 +148,30 @@
}, 40); }, 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() { function show_image() {
mask_tag = false; mask_tag = false;
let dst = new cv.Mat(); /*let dst = new cv.Mat();
console.time("image show");
if (image_process.roi_tag) { if (image_process.roi_tag) {
dst = image_for_show.roi(image_process.ROI_rect); dst = image_for_show.roi(image_process.ROI_rect);
} else { } else {
@ -150,39 +186,21 @@
cv.absdiff(image_for_show, cop, image_for_show); cv.absdiff(image_for_show, cop, image_for_show);
cv.bitwise_not(image_for_show, image_for_show); cv.bitwise_not(image_for_show, image_for_show);
dst = 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 scale = Math.min(canvas_height / dst.rows, canvas_width / dst.cols);
let dsize = new cv.Size(scale * dst.cols, scale * dst.rows); let dsize = new cv.Size(scale * dst.cols, scale * dst.rows);
cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA); cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
cv.imshow("canvas", dst); cv.imshow("canvas", dst);
console.timeEnd("image show");
dst.delete(); dst.delete();
} }
async function init_canvas() { let init_canvas = async (cb) => {
let img = new Image(); if (cb) {
image_for_show = new cv.Mat(); cb();
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);
};
} }
};
function wheel_event_handler(e) { function wheel_event_handler(e) {
e.preventDefault(); e.preventDefault();
@ -251,7 +269,30 @@
onMount(async () => { onMount(async () => {
canvas_height = window_height - 64; canvas_height = window_height - 64;
canvas_width = (window_width * 13) / 16; 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 () => { onDestroy(async () => {
@ -304,13 +345,7 @@
<div class="column" style="text-align:center"> <div class="column" style="text-align:center">
<div> <div>
{#if mask_tag} {#if mask_tag}
<Mask <Mask {canvas_dom} on:maskclose={on_mask_close} />
{canvas_dom}
on:maskclose={(e) => {
mask_tag = false;
console.log(e);
}}
/>
{/if} {/if}
<canvas <canvas
bind:this={canvas_dom} bind:this={canvas_dom}

2
src/lib/Mask.svelte
View File

@ -419,10 +419,8 @@
dispatch("maskclose", { dispatch("maskclose", {
type: "success", type: "success",
rect: crop_rect, rect: crop_rect,
image_size: {
width: mask_width, width: mask_width,
height: mask_height, height: mask_height,
},
}); });
}} }}
> >