mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2025-01-19 13:18:28 +00:00
Code Issues Actions 2 Packages Projects Releases 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 file: File | undefined;
let result: ImageBitmap;
let imageContainer: HTMLElement;
let canvas: HTMLCanvasElement;
@ -20,7 +19,7 @@
let worker: Worker;
const renderImageToCanvas = () => {
const renderImageToCanvas = (result: ImageBitmap) => {
if (canvas && result) {
canvas.width = result.width;
canvas.height = result.height;
@ -40,8 +39,7 @@
const eventData = event.data.cobaltRemoveBgWorker;
if (eventData.result) {
state = "done";
result = eventData.result;
renderImageToCanvas();
renderImageToCanvas(eventData.result);
}
};
@ -53,7 +51,7 @@
};
const exportImage = async () => {
if (!result || !file) return;
if (!file) return;
const resultBlob = await new Promise<Blob>((resolve, reject) => {
canvas.toBlob(blob => {
@ -110,7 +108,7 @@
{/if}
{#if ["busy", "done"].includes(state)}
<div id="image-preview" bind:this={imageContainer}>
<div id="image-preview" bind:this={imageContainer} class={state}>
{#if state === "busy"}
<Skeleton width="100%" height="100%" class="big" />
{/if}
@ -175,6 +173,14 @@
box-shadow: var(--button-box-shadow);
}
#image-preview canvas {
display: none;
}
#image-preview.done canvas {
display: block;
}
.button-row {
display: flex;
flex-direction: row;