collage-maker/web/index.js

121 lines
3.1 KiB
JavaScript
Raw Normal View History

2023-08-27 19:37:05 -04:00
2023-08-27 22:22:17 -04:00
function main() {
initCollage("collage")
}
2023-08-27 19:37:05 -04:00
function makeCroppieElem(elem, imgUrl) {
cpie = new Croppie(elem, {
viewport: {
width: elem.clientWidth,
height: elem.clientHeight,
type: 'square'
},
showZoomer: false,
});
cpie.bind({
url: imgUrl
});
2023-08-27 22:22:17 -04:00
return cpie
2023-08-27 19:37:05 -04:00
}
2023-08-27 22:22:17 -04:00
// collage state
var collageDivId;
var crops = [];
function initCollage(divId) {
collageDivId = divId
2023-08-27 19:37:05 -04:00
const collageDiv = document.getElementById(collageDivId)
for(elem of collageDiv.getElementsByClassName("collage-img")) {
2023-08-27 22:22:17 -04:00
const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
const lastLen = crops.push(cpie)
elem.dataset.collageCropieIndex = lastLen - 1
2023-08-27 19:37:05 -04:00
}
}
function showCrop() {
for(cpie of crops) {
console.log(cpie.get())
console.log(cpie.element.clientWidth)
console.log(cpie.element.clientHeight)
}
}
2023-08-27 22:22:17 -04:00
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();
2023-08-27 22:22:17 -04:00
}
function snap() {
const collageDiv = document.getElementById(collageDivId)
col = collageDiv.offsetLeft;
cot = collageDiv.offsetTop;
console.log("----------------------")
req = {
background_image: "",
aspect: {
width: 528 * 4 * 2,
height: 816 * 4,
},
dimension: {
width: collageDiv.clientWidth,
height: collageDiv.clientHeight,
},
photos: [],
};
for(elem of collageDiv.getElementsByClassName("collage-img")) {
const cpie = crops[elem.dataset.collageCropieIndex]
// console.log(cpie.get().points)
// console.log(elem.offsetLeft - col)
// console.log(elem.offsetTop - cot)
// console.log(elem.clientWidth)
// console.log(elem.clientHeight)
const fsx = elem.offsetLeft - col
const fsy = elem.offsetTop - cot
const [sx, sy, ex, ey] = cpie.get().points;
const photo = {
image: elem.dataset.collageImageUrl.slice("images/".length),
2023-08-27 22:22:17 -04:00
crop: {
start: {
x: parseInt(sx),
y: parseInt(sy),
},
end: {
x: parseInt(ex),
y: parseInt(ey),
},
},
frame: {
start: {
x: fsx,
y: fsy,
},
end: {
x: fsx + elem.clientWidth,
y: fsy + elem.clientHeight,
},
},
};
req.photos.push(photo)
}
2023-08-27 22:22:17 -04:00
console.log(JSON.stringify(req));
(async () => {
collagFile = await makeCollage(req)
// const collageUrlA = document.createElement("a");
const collageUrlA = document.getElementById("collage-url");
collageUrlA.href = `collages/${collagFile}`;
collageUrlA.text = `${collagFile} generated`;
})();
2023-08-27 22:22:17 -04:00
}