From c2ed0f84cef644ba28096f01ec14764114b68c0f Mon Sep 17 00:00:00 2001 From: memdmp Date: Mon, 18 Aug 2025 18:30:04 +0200 Subject: feat: initial commit --- src/app.d.ts | 13 +++ src/app.html | 11 +++ src/lib/Alerts.svelte | 184 +++++++++++++++++++++++++++++++++++++ src/lib/assets/favicon.old.svg | 9 ++ src/lib/assets/favicon.png | Bin 0 -> 1149 bytes src/lib/assets/favicon.svg | 1 + src/lib/index.ts | 1 + src/routes/+layout.svelte | 11 +++ src/routes/+page.svelte | 202 +++++++++++++++++++++++++++++++++++++++++ 9 files changed, 432 insertions(+) create mode 100644 src/app.d.ts create mode 100644 src/app.html create mode 100644 src/lib/Alerts.svelte create mode 100644 src/lib/assets/favicon.old.svg create mode 100644 src/lib/assets/favicon.png create mode 100644 src/lib/assets/favicon.svg create mode 100644 src/lib/index.ts create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/+page.svelte (limited to 'src') diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..da08e6d --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://svelte.dev/docs/kit/types#app.d.ts +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..b0b3788 --- /dev/null +++ b/src/app.html @@ -0,0 +1,11 @@ + + + + + + %sveltekit.head% + + +

%sveltekit.body%

+ + diff --git a/src/lib/Alerts.svelte b/src/lib/Alerts.svelte new file mode 100644 index 0000000..1e4641b --- /dev/null +++ b/src/lib/Alerts.svelte @@ -0,0 +1,184 @@ + + + + + + +{#if ids[0] === id && dialogObject.open} +

+ +

+{/if} diff --git a/src/lib/assets/favicon.old.svg b/src/lib/assets/favicon.old.svg new file mode 100644 index 0000000..d69dee8 --- /dev/null +++ b/src/lib/assets/favicon.old.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/lib/assets/favicon.png b/src/lib/assets/favicon.png new file mode 100644 index 0000000..d7ac7dd Binary files /dev/null and b/src/lib/assets/favicon.png differ diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg new file mode 100644 index 0000000..45f50a4 --- /dev/null +++ b/src/lib/assets/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000..856f2b6 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1 @@ +// place files you want to import through the `$lib` alias in this folder. diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..20f8d04 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,11 @@ + + + + + + +{@render children?.()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..7cc3eb7 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,202 @@ + + + + + + Bitmap to Pixelated SVG + + + + +

+

PixelSVG

+

+ + {fileName ? `File: ${fileName}` : 'Upload a File'} +

{ + const imgEl = e.currentTarget as HTMLImageElement; + const rect = { + width: imgEl.naturalWidth, + height: imgEl.naturalHeight, + }; + if ( + rect.width * rect.height > 65536 && + !(await confirm( + `This image isn't small; it's made up of ${rect.width * rect.height} pixels. The outputted file could be up to ${((``.length + ``.length * rect.width * rect.height) / 1024 / 1024).toFixed(1)} MB large. It may crash your browser. Are you sure you wish to continue?`, + { + title: 'Confirmation', + } + )) + ) + return (imgUrl = ''), (fileName = ''); + canvas.width = rect.width; + canvas.height = rect.height; + const ctx = canvas.getContext('2d', { + alpha: true, + colorSpace: 'display-p3', + }); + if (!ctx) throw new Error('no 2d context obtainable'); + try { + ctx.drawImage(e.currentTarget as HTMLImageElement, 0, 0); + } catch (error) { + await alert( + "Failed to draw image to canvas. The image's data may be invalid or the image may be too big. Check the Console.", + { + title: 'Failed to draw image', + } + ); + throw error; + } + const data = ctx.getImageData(0, 0, rect.width, rect.height, { + colorSpace: 'display-p3', + }); + let out = [] as [r: number, g: number, b: number, a: number][]; + for (let i = 0; i < data.data.length; i += 4) { + const r = data.data[i + 0]; + const g = data.data[i + 1]; + const b = data.data[i + 2]; + const a = data.data[i + 3]; + out.push([r, g, b, a]); + } + save(out, rect.width, rect.height); + }} + onerror={(e) => { + if (imgUrl !== '') + alert( + 'Failed to load the image into an HTML Image Element. Please make sure the image you provided is valid and in a format your browser understands.', + { + title: 'Failed to load image', + } + ); + }} + /> + { + if (fileInput?.files?.length) { + const file = fileInput.files![0]; + fileName = file.name; + fileRaw = file ?? null; + } + }} + style="opacity:0;position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;" + /> + +

+ {#if output} +

+ Output:
+ could not render

could not render

+ {/if} +

+ {imgUrl ? 'Canvas:' : ''}

+

+

-- cgit v1.2.3