balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Snap button generates collage and shows link

Browse Source 
fixes #3
This commit is contained in:
Balakrishnan Balasubramanian 2023-08-31 23:31:51 -04:00
parent 1c742809a1
commit faa413c9b1
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/index.html
View File

@ -69,7 +69,10 @@
<body onload="main()"> <body onload="main()">
<div class="container"> <div class="container">
<div class="controls"> <div class="controls">
<div>
<button class="showbuton" onClick="snap()">Snap Collage</button> <button class="showbuton" onClick="snap()">Snap Collage</button>
<p><a href="" target="_blank" id="collage-url"></a></p>
</div>
</div> </div>
<div class="imagebox"> <div class="imagebox">
<div id="collage" class="image-surface letter-landscape-2"> <div id="collage" class="image-surface letter-landscape-2">

23
web/index.js
View File

@ -44,9 +44,15 @@ function showCrop() {
} }
} }
async function ip() { async function makeCollage(req) {
const resp = await fetch("dummy.txt") const resp = await fetch("make-collage", {
console.log(await resp.text()) method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(req),
})
return await resp.text();
} }
function snap() { function snap() {
@ -78,7 +84,7 @@ function snap() {
const fsy = elem.offsetTop - cot const fsy = elem.offsetTop - cot
const [sx, sy, ex, ey] = cpie.get().points; const [sx, sy, ex, ey] = cpie.get().points;
const photo = { const photo = {
image: elem.dataset.collageImageUrl, image: elem.dataset.collageImageUrl.slice("images/".length),
crop: { crop: {
start: { start: {
x: parseInt(sx), x: parseInt(sx),
@ -102,6 +108,13 @@ function snap() {
}; };
req.photos.push(photo) req.photos.push(photo)
} }
console.log(JSON.stringify(req)); 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`;
})();
} }