Add download image button

2YH02 · Jun 26, 2024 · 8142975 · 8142975
1 parent 49f93bd
commit 8142975
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/src/example/pages/resize-page/resize-page.ts b/src/example/pages/resize-page/resize-page.ts
@@ -70,6 +70,9 @@ const content = /* html */ `
     />
   </div>
   <p class="color-main font-6" id="wating-text">Waiting for photo selection...</p>
+  <div>
+    <a class="button mt-3" id="image-download-button" style="display: none">download</a>
+  </div>
 </section>
 `;
 

diff --git a/src/example/pages/resize-page/scripts/resize-file.ts b/src/example/pages/resize-page/scripts/resize-file.ts
@@ -39,6 +39,10 @@ const handleClickTransform = () => {
     "resample-input"
   ) as HTMLInputElement;
 
+  const imageDownButtonEl = document.getElementById(
+    "image-download-button"
+  ) as HTMLAnchorElement;
+
   qualityInput.addEventListener("change", (e) => {
     const target = e.target as HTMLInputElement;
     if (Number(target.value) < 0) {
@@ -126,7 +130,12 @@ const handleClickTransform = () => {
       if (!imagePathname || imagePathname === "/") {
         watingTextEl.innerText = "Please press the convert button!";
       } else {
+        const src = previewImage.src;
+
         watingTextEl.style.display = "none";
+        imageDownButtonEl.style.display = "block";
+        imageDownButtonEl.href = src;
+        imageDownButtonEl.download = src.split("/")[src.split("/").length - 1];
       }
 
       formatSizeEl.innerText = `${Math.floor(resizedFile.size / 1024)} kB`;

diff --git a/src/example/style.css b/src/example/style.css
@@ -16,6 +16,10 @@ h3 {
   padding: 0;
 }
 
+a {
+  text-decoration: none;
+}
+
 h1 {
   margin-block: 8px;
 }
@@ -106,6 +110,10 @@ nav a:hover {
   margin-bottom: 12px;
 }
 
+.mt-3 {
+  margin-top: 12px;
+}
+
 .mx-auto {
   margin-inline: auto;
 }