feat(wrapped): add download button

1 files changed, 17 insertions, 2 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index f5bd43b3..5d48a863 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -13,6 +13,7 @@
 	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';
 
 	export let user: AniListAuthorisation;
 
@@ -117,14 +118,23 @@
 				})
 				.then((blob) => {
 					const downloadWrapper = document.createElement('a');
+					const wrappedImageButton = document.getElementById(
+						'wrapped-image-download'
+					) as HTMLAnchorElement;
 					const image = document.createElement('img');
+					const object = URL.createObjectURL(blob);
 
 					// downloadWrapper.download = `due_dot_moe_wrapped_${dark ? 'dark' : 'light'}.png`;
-					downloadWrapper.href = URL.createObjectURL(blob);
+					downloadWrapper.href = object;
 					downloadWrapper.target = '_blank';
-					image.src = URL.createObjectURL(blob);
+					image.src = object;
+
 					downloadWrapper.appendChild(image);
 
+					if (wrappedImageButton !== null) {
+						wrappedImageButton.href = object;
+					}
+
 					const wrappedFinal = document.getElementById('wrapped-final');
 
 					if (wrappedFinal !== null) {
@@ -314,6 +324,11 @@
 				</a>
 				<input type="number" bind:value={maxAbbreviateLength} />
 			</li>
+			<li>
+				<a href={'#'} target="_blank" id="wrapped-image-download">
+					Download generated image (generate first)
+				</a>
+			</li>
 		</ul>
 
 		<br />