2023-09-06 18:56:02 -04:00
|
|
|
var pageSizes = {
|
2023-09-05 18:42:47 -04:00
|
|
|
"letter-portrait" : {
|
|
|
|
"ap": "85 / 110",
|
|
|
|
"width": 3264,
|
|
|
|
"height": 4224,
|
|
|
|
},
|
|
|
|
"letter-landscape" : {
|
|
|
|
"ap": "110 / 85",
|
|
|
|
"width": 4224,
|
|
|
|
"height": 3264,
|
|
|
|
},
|
|
|
|
"fiveseven-portrait" : {
|
|
|
|
"ap": "5 / 7",
|
|
|
|
"width": 2250,
|
|
|
|
"height": 3150,
|
|
|
|
},
|
|
|
|
"fiveseven-landscape" : {
|
|
|
|
"ap": "7 / 5",
|
|
|
|
"width": 3150,
|
|
|
|
"height": 2250,
|
|
|
|
},
|
|
|
|
"foursix-portrait" : {
|
|
|
|
"ap": "4 / 6",
|
|
|
|
"width": 1800,
|
|
|
|
"height": 2700,
|
|
|
|
},
|
|
|
|
"foursix-landscape" : {
|
|
|
|
"ap": "6 / 4",
|
|
|
|
"width": 2700,
|
|
|
|
"height": 1800,
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
2023-09-06 18:56:02 -04:00
|
|
|
// elements
|
|
|
|
|
|
|
|
/** @type {HTMLButtonElement} */
|
|
|
|
var snapButton
|
|
|
|
|
|
|
|
/** @type {HTMLDivElement} */
|
|
|
|
var collageDiv
|
|
|
|
|
|
|
|
/** @type {HTMLSelectElement} */
|
|
|
|
var pageSizeSelect
|
|
|
|
|
|
|
|
/** @type {HTMLAnchorElement} */
|
|
|
|
var collageUrlA
|
2023-09-05 18:42:47 -04:00
|
|
|
|
|
|
|
// collage state
|
2023-09-06 18:56:02 -04:00
|
|
|
|
2023-09-05 18:42:47 -04:00
|
|
|
var crops = [];
|
|
|
|
var pageSize = "letter-landscape";
|
2023-08-27 19:37:05 -04:00
|
|
|
|
2023-08-27 22:22:17 -04:00
|
|
|
function main() {
|
2023-09-05 18:42:47 -04:00
|
|
|
snapButton = document.getElementById("snapper")
|
|
|
|
collageDiv = document.getElementById("collage")
|
|
|
|
pageSizeSelect = document.getElementById("page_size_selector")
|
|
|
|
collageUrlA = document.getElementById("collage-url")
|
2023-09-06 18:56:02 -04:00
|
|
|
|
2023-09-05 18:42:47 -04:00
|
|
|
initCollage()
|
2023-09-06 18:56:02 -04:00
|
|
|
|
2023-09-05 18:42:47 -04:00
|
|
|
snapButton.onclick = () => snap()
|
2023-09-06 18:56:02 -04:00
|
|
|
pageSizeSelect.onchange = () => pageSizeChange()
|
2023-08-27 22:22:17 -04:00
|
|
|
}
|
2023-08-27 19:37:05 -04:00
|
|
|
|
2023-09-06 18:56:02 -04:00
|
|
|
/**
|
|
|
|
* @param {HTMLDivElement} elem
|
|
|
|
* @param {string} imgUrl
|
|
|
|
*/
|
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
|
|
|
|
2023-09-05 18:42:47 -04:00
|
|
|
function initCollage() {
|
|
|
|
for(cpie of crops) {
|
|
|
|
cpie.destroy()
|
|
|
|
}
|
|
|
|
crops = []
|
2023-08-27 19:37:05 -04:00
|
|
|
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
|
|
|
|
2023-08-31 23:31:51 -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() {
|
|
|
|
col = collageDiv.offsetLeft;
|
|
|
|
cot = collageDiv.offsetTop;
|
|
|
|
console.log("----------------------")
|
|
|
|
req = {
|
|
|
|
background_image: "",
|
|
|
|
aspect: {
|
2023-09-05 18:42:47 -04:00
|
|
|
width: pageSizes[pageSize]["width"],
|
|
|
|
height: pageSizes[pageSize]["height"],
|
2023-08-27 22:22:17 -04:00
|
|
|
},
|
|
|
|
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 = {
|
2023-08-31 23:31:51 -04:00
|
|
|
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-31 23:31:51 -04:00
|
|
|
|
2023-08-27 22:22:17 -04:00
|
|
|
console.log(JSON.stringify(req));
|
2023-08-31 23:31:51 -04:00
|
|
|
(async () => {
|
|
|
|
collagFile = await makeCollage(req)
|
|
|
|
collageUrlA.href = `collages/${collagFile}`;
|
|
|
|
collageUrlA.text = `${collagFile} generated`;
|
|
|
|
})();
|
2023-08-27 22:22:17 -04:00
|
|
|
}
|
2023-09-05 18:42:47 -04:00
|
|
|
|
2023-09-06 18:56:02 -04:00
|
|
|
function pageSizeChange() {
|
|
|
|
collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"])
|
|
|
|
pageSize = pageSizeSelect.value
|
2023-09-05 18:42:47 -04:00
|
|
|
initCollage()
|
|
|
|
}
|
|
|
|
|
|
|
|
main()
|