fix: download image

src/components/HomePage/index.tsx

@@ -14,6 +14,7 @@ import { selectors } from "@/store";
 import { getRandomArbitrary } from "@/services/random-value";
 import Title from "../Title";
 import { UserDailyForecast } from "@/api/resources/UserDailyForecasts";
+import { download } from "@/services/download";
 
 const buttonTextFormatter = (text: string): JSX.Element => {
   const sentences = text.split(".");
@@ -83,6 +84,11 @@ function HomePage(): JSX.Element {
     // isPending
   } = useApiCall<UserDailyForecast>(dailyForecastData);
 
+  const downloadImg = () => {
+    if( !asset ) return;
+    download(asset.url.replace('http://', 'https://'), 'image.png');
+  }
+
   return (
     <section
       className={`${styles.page} page`}
@@ -100,8 +106,8 @@ function HomePage(): JSX.Element {
             {aura && <EnergyValues values={aura.stats} />}
           </div>
         </BlurringSubstrate>
-        <div className={styles["header__save"]}>
+        <div className={styles["header__save"]} onClick={downloadImg}>
-          <a href={asset?.url.replace('http://', 'https://')} download></a>
+          {/* <a href={asset?.url.replace('http://', 'https://')} download></a> */}
         </div>
       </div>
       <div className={styles.content}>

src/services/download/index.ts

@@ -0,0 +1,18 @@
+export const download = (url: string, name: string) => {
+  if (!url) {
+    throw new Error("Resource URL not provided! You need to provide one");
+  }
+  fetch(url)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const blobURL = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = blobURL;
+      a.style.cssText = "display: none";
+
+      if (name && name.length) a.download = name;
+      document.body.appendChild(a);
+      a.click();
+    })
+    .catch((e) => console.error(e));
+};