collage-maker/web/index.js

function main() {
    initCollage("collage")
}

function makeCroppieElem(elem, imgUrl) {
    cpie = new Croppie(elem, {
        viewport: {
            width: elem.clientWidth,
            height: elem.clientHeight,
            type: 'square'
        },
        showZoomer: false,
    });

    cpie.bind({
        url: imgUrl
    });

    return cpie

}

// collage state

var collageDivId;
var crops = [];

function initCollage(divId) {
    collageDivId = divId
    const collageDiv = document.getElementById(collageDivId)
    for(elem of collageDiv.getElementsByClassName("collage-img")) {
        const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
        const lastLen = crops.push(cpie)
        elem.dataset.collageCropieIndex = lastLen - 1
    }
}

function showCrop() {
    for(cpie of crops) {
        console.log(cpie.get())
        console.log(cpie.element.clientWidth)
        console.log(cpie.element.clientHeight)
    }
}

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() {
    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),
            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)
    }

    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`;
    })();
}