108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
|
|
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 ip() {
|
|
const resp = await fetch("dummy.txt")
|
|
console.log(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,
|
|
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));
|
|
ip()
|
|
}
|