diff --git a/src/app.jsx b/src/app.jsx
index b06447f..b4a79ad 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -4,7 +4,7 @@ import { compact, map } from 'lodash';
 
 import visualCenter from './visualCenter.js';
 import demoImage from './assets/demo.js';
-// import { downloadCenteredImage } from './lib/imglib';
+import { downloadCenteredImage } from './lib/imglib.js';
 
 import {
   MainHeader,
@@ -242,6 +242,21 @@ function App() {
         </div>
       </div>
 
+      <div className="txt-center">
+        <Button
+          onClick={() =>
+            downloadCenteredImage(imgSrc || demoImage, {
+              x: resultLeft,
+              y: resultTop,
+            })
+          }
+        >
+          Download
+        </Button>
+      </div>
+
+      <Space h={1} />
+
       <Inline style={{ gap: 16 }}>
         <Checkbox
           checked={showGuides}
diff --git a/src/lib/imglib.ts b/src/lib/imglib.js
similarity index 63%
rename from src/lib/imglib.ts
rename to src/lib/imglib.js
index 47b81c7..02276b3 100644
--- a/src/lib/imglib.ts
+++ b/src/lib/imglib.js
@@ -1,7 +1,4 @@
-export function downloadCenteredImage(
-  src: string,
-  center: { x: number; y: number }
-) {
+export function downloadCenteredImage(src, center) {
   const { x, y } = center;
 
   const img = new Image();
@@ -17,22 +14,15 @@ export function downloadCenteredImage(
       return;
     }
 
-    // ctx.drawImage(img, 0, 0);
     ctx.drawImage(
       img,
       x > 0.5 ? 0 : canvas.width - img.width,
       y > 0.5 ? 0 : canvas.height - img.height
     );
 
-    // // draw in the dom
-    // const img2 = new Image();
-    // img2.src = canvas.toDataURL('image/png');
-    // img2.style.border = '1px solid red';
-    // document.body.appendChild(img2);
-
     const a = document.createElement('a');
     a.href = canvas.toDataURL('image/png');
-    a.download = 'image.png';
+    a.download = 'image-centered.png';
     a.click();
   };
 }