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

web/cutout: accommodate for updated file receivers

Browse source
This commit is contained in:
wukko 2025-01-19 03:00:03 +06:00
parent 2279b5d845
commit 192635f2ce
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,7 +11,7 @@
import FileReceiver from "$components/misc/FileReceiver.svelte"; import FileReceiver from "$components/misc/FileReceiver.svelte";
let draggedOver = false; let draggedOver = false;
let file: File | undefined; let files: FileList | undefined;
let imageContainer: HTMLElement; let imageContainer: HTMLElement;
let canvas: HTMLCanvasElement; let canvas: HTMLCanvasElement;
@ -30,13 +30,13 @@
}; };
const processImage = async () => { const processImage = async () => {
if (!file) return; if (!files) return;
state = "busy"; state = "busy";
worker = new RemoveBgWorker(); worker = new RemoveBgWorker();
worker.postMessage({ worker.postMessage({
cobaltRemoveBgWorker: { file }, cobaltRemoveBgWorker: { file: files[0] },
}); });
worker.onmessage = async (event) => { worker.onmessage = async (event) => {
@ -56,7 +56,7 @@
}; };
const exportImage = async () => { const exportImage = async () => {
if (!file) return; if (!files) return;
const resultBlob = await new Promise<Blob>((resolve, reject) => { const resultBlob = await new Promise<Blob>((resolve, reject) => {
canvas.toBlob((blob) => { canvas.toBlob((blob) => {
@ -66,7 +66,7 @@
}); });
return await downloadFile({ return await downloadFile({
file: new File([resultBlob], `${file.name} (cutout).png`, { file: new File([resultBlob], `${files[0].name} (cutout).png`, {
type: "image/png", type: "image/png",
}), }),
}); });
@ -79,20 +79,20 @@
}); });
</script> </script>
<DropReceiver bind:file bind:draggedOver id="cutout-container"> <DropReceiver bind:files bind:draggedOver id="cutout-container">
{#if state === "empty"} {#if state === "empty"}
<FileReceiver <FileReceiver
bind:draggedOver bind:draggedOver
bind:file bind:files
acceptTypes={["image/*"]} acceptTypes={["image/*"]}
acceptExtensions={["jpg", "png", "webp"]} acceptExtensions={["jpg", "png", "webp"]}
/> />
{#if file} {#if files}
<div class="button-row"> <div class="button-row">
<button on:click={processImage}>process files</button> <button on:click={processImage}>process files</button>
<button <button
on:click={() => { on:click={() => {
file = undefined; files = undefined;
}} }}
> >
clear imported files clear imported files
@ -126,7 +126,7 @@
<button <button
on:click={() => { on:click={() => {
worker?.terminate(); worker?.terminate();
file = undefined; files = undefined;
state = "empty"; state = "empty";
}} }}
> >
@ -140,7 +140,7 @@
<button <button
on:click={() => { on:click={() => {
state = "empty"; state = "empty";
file = undefined; files = undefined;
}} }}
> >
start over start over