refactor(wrapped): move to modern-screenshot

3 files changed, 79 insertions, 74 deletions

diff --git a/bun.lockb b/bun.lockb
index cf38e675..281f941c 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index ef7b5c20..ad751010 100644
--- a/package.json
+++ b/package.json
@@ -1,42 +1,42 @@
 {
-	"name": "due.moe",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/dom-to-image": "^2.6.5",
-		"@types/file-saver": "^2.0.5",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-adapter-bun": "^0.5.0",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"dexie": "^4.0.1-alpha.25",
-		"dom-to-image": "^2.6.0",
-		"html2canvas": "^1.4.1",
-		"rss-parser": "^3.13.0",
-		"socket.io": "^4.7.2",
-		"socket.io-client": "^4.7.2"
-	}
+  "name": "due.moe",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/dom-to-image": "^2.6.5",
+    "@types/file-saver": "^2.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-adapter-bun": "^0.5.0",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "dexie": "^4.0.1-alpha.25",
+    "html2canvas": "^1.4.1",
+    "modern-screenshot": "^4.4.33",
+    "rss-parser": "^3.13.0",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2"
+  }
 }
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 438e37bb..ed9f2060 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -12,8 +12,7 @@
 	import lastPruneTimes from '../../stores/lastPruneTimes.js';
 	import manga from '../../stores/manga.js';
 	import Error from '$lib/Error.svelte';
-	import domtoimage from 'dom-to-image';
-	import type { HTMLAttributeAnchorTarget } from 'svelte/elements.js';
+	import { domToBlob } from 'modern-screenshot';
 
 	export let user: AniListAuthorisation;
 
@@ -112,38 +111,44 @@
 		}
 
 		if (element !== null) {
-			domtoimage
-				.toBlob(element, {
-					bgcolor: transparency ? undefined : dark ? '#0b1622' : '#edf1f5'
-				})
-				.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.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
-					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();
-				});
+			domToBlob(element, {
+				backgroundColor: transparency ? undefined : 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.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
+				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));