1 files changed, 64 insertions, 0 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 44b91924..10d38a26 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -2,6 +2,7 @@
 	import { userIdentity } from '$lib/AniList/identity.js';
 	import { user } from '$lib/AniList/user.js';
 	import type { Badge } from '$lib/userBadgesDatabase.js';
+	import { domToBlob } from 'modern-screenshot';
 	import { onMount } from 'svelte';
 	// import { io } from 'socket.io-client';
 
@@ -12,6 +13,8 @@
 	let error: null | string;
 	// const socket = io();
 	let badges: Badge[] | null = null;
+	let dark = true;
+	let transparent = false;
 
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
@@ -73,6 +76,58 @@
 	};
 
 	const nbsp = (str: string) => str.replace(/ /g, ' ');
+
+	const screenshot = async () => {
+		let element = document.querySelector('#badges') as HTMLElement;
+
+		element.classList.add('invert');
+
+		if (element !== null) {
+			domToBlob(element, {
+				style: {
+					backgroundColor: transparent ? 'transparent' : dark ? '#0b1622' : '#edf1f5'
+				},
+				quality: 1,
+				scale: 2,
+				fetch: {
+					requestInit: {
+						mode: 'cors'
+					}
+					// bypassingCache: true
+				}
+			}).then((blob) => {
+				const downloadWrapper = document.createElement('a');
+				const wrappedImageButton = document.getElementById(
+					'wrapped-image-download'
+				) as HTMLAnchorElement;
+				const image = document.createElement('img');
+				const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
+
+				downloadWrapper.href = object;
+				downloadWrapper.target = '_blank';
+				image.src = object;
+
+				downloadWrapper.appendChild(image);
+
+				if (wrappedImageButton !== null) {
+					wrappedImageButton.href = object;
+				}
+
+				const wrappedFinal = document.getElementById('wrapped-final');
+
+				if (wrappedFinal !== null) {
+					wrappedFinal.innerHTML = '';
+					wrappedFinal.appendChild(downloadWrapper);
+				}
+
+				downloadWrapper.click();
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+
+			element.classList.remove('invert');
+		}
+	};
 </script>
 
 {#await currentUserIdentity}
@@ -87,6 +142,11 @@
 			<a href={`#`} on:click={() => (editMode = !editMode)}>
 				{editMode ? 'Disable' : 'Enable'} Edit Mode
 			</a>
+			•
+			<a href={`#`} on:click={() => screenshot()}>Download</a>
+			•
+			<input type="checkbox" bind:checked={dark} /> Dark Mode
+			<input type="checkbox" bind:checked={transparent} /> Transparent Background
 		</p>
 	{/if}
 
@@ -159,4 +219,8 @@
 		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
 		grid-gap: 0;
 	}
+
+	:global(.invert *) {
+		filter: invert(0) !important;
+	}
 </style>