Snap button generates collage and shows link

fixes #3
2023-08-31 23:31:51 -04:00
parent 1c742809a1
commit faa413c9b1
2 changed files with 22 additions and 6 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -69,7 +69,10 @@
    <body onload="main()">
        <div class="container">
            <div class="controls">
-                <button class="showbuton" onClick="snap()">Snap Collage</button>
+                <div>
+                    <button class="showbuton" onClick="snap()">Snap Collage</button>
+                    <p><a href="" target="_blank" id="collage-url"></a></p>
+                </div>
            </div>
            <div class="imagebox">
            <div id="collage" class="image-surface letter-landscape-2">
--- a/web/index.js
+++ b/web/index.js
@@ -44,9 +44,15 @@ function showCrop() {
    }
 }

-async function ip() {
-    const resp = await fetch("dummy.txt")
-    console.log(await resp.text())
+async function makeCollage(req) {
+    const resp = await fetch("make-collage", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(req),
+    })
+    return await resp.text();
 }

 function snap() {
@@ -78,7 +84,7 @@ function snap() {
        const fsy = elem.offsetTop - cot
        const [sx, sy, ex, ey] = cpie.get().points;
        const photo = {
-            image: elem.dataset.collageImageUrl,
+            image: elem.dataset.collageImageUrl.slice("images/".length),
            crop: {
                start: {
                    x: parseInt(sx),
@@ -102,6 +108,13 @@ function snap() {
        };
        req.photos.push(photo)
    }
+
    console.log(JSON.stringify(req));
-    ip()
+    (async () => {
+        collagFile = await makeCollage(req)
+        // const collageUrlA = document.createElement("a");
+        const collageUrlA = document.getElementById("collage-url");
+        collageUrlA.href = `collages/${collagFile}`;
+        collageUrlA.text = `${collagFile} generated`;
+    })();
 }