refactor(wrapped): move to modern-screenshot

1 files changed, 39 insertions, 34 deletions

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));