Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 10:46:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/cutout: fix canvas visibility

Browse source
This commit is contained in:
wukko 2025-01-17 01:25:52 +06:00
parent 28eb9ebe5d
commit cc3e3be118
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/routes/cutout/+page.svelte
View file

@ -12,7 +12,6 @@
let draggedOver = false; let draggedOver = false;
let file: File | undefined; let file: File | undefined;
let result: ImageBitmap;
let imageContainer: HTMLElement; let imageContainer: HTMLElement;
let canvas: HTMLCanvasElement; let canvas: HTMLCanvasElement;
@ -20,7 +19,7 @@
let worker: Worker; let worker: Worker;
const renderImageToCanvas = () => { const renderImageToCanvas = (result: ImageBitmap) => {
if (canvas && result) { if (canvas && result) {
canvas.width = result.width; canvas.width = result.width;
canvas.height = result.height; canvas.height = result.height;
@ -40,8 +39,7 @@
const eventData = event.data.cobaltRemoveBgWorker; const eventData = event.data.cobaltRemoveBgWorker;
if (eventData.result) { if (eventData.result) {
state = "done"; state = "done";
result = eventData.result; renderImageToCanvas(eventData.result);
renderImageToCanvas();
} }
}; };
@ -53,7 +51,7 @@
}; };
const exportImage = async () => { const exportImage = async () => {
if (!result || !file) return; if (!file) return;
const resultBlob = await new Promise<Blob>((resolve, reject) => { const resultBlob = await new Promise<Blob>((resolve, reject) => {
canvas.toBlob(blob => { canvas.toBlob(blob => {
@ -110,7 +108,7 @@
{/if} {/if}
{#if ["busy", "done"].includes(state)} {#if ["busy", "done"].includes(state)}
<div id="image-preview" bind:this={imageContainer}> <div id="image-preview" bind:this={imageContainer} class={state}>
{#if state === "busy"} {#if state === "busy"}
<Skeleton width="100%" height="100%" class="big" /> <Skeleton width="100%" height="100%" class="big" />
{/if} {/if}
@ -175,6 +173,14 @@
box-shadow: var(--button-box-shadow); box-shadow: var(--button-box-shadow);
} }
#image-preview canvas {
display: none;
}
#image-preview.done canvas {
display: block;
}
.button-row { .button-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;