feat(ImageShow.svelte): write image to disk
BREAKING CHANGE:
This commit is contained in:
parent
9a2f7f0587
commit
89b2a2bdd5
|
|
@ -9,6 +9,6 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<div class="column" style="text-align:center">
|
||||
<div>
|
||||
{#if mask_tag}
|
||||
<Mask
|
||||
{canvas_dom}
|
||||
on:maskclose={(e) => {
|
||||
mask_tag = false;
|
||||
console.log(e);
|
||||
}}
|
||||
/>
|
||||
<Mask {canvas_dom} on:maskclose={on_mask_close} />
|
||||
{/if}
|
||||
<canvas
|
||||
bind:this={canvas_dom}
|
||||
|
|
|
|||
|
|
@ -419,10 +419,8 @@
|
|||
dispatch("maskclose", {
|
||||
type: "success",
|
||||
rect: crop_rect,
|
||||
image_size: {
|
||||
width: mask_width,
|
||||
height: mask_height,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue