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

college is generated

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-08-27 22:22:17 -04:00
parent 4b34e7647d
commit cd7c27460f
5 changed files with 141 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
cmd/run.go Normal file
View File

@ -0,0 +1,56 @@
package main
import (
"encoding/json"
"fmt"
"os"
"go.balki.me/collage-maker/collage"
)
func main() {
req := collage.Request{}
/*
reqStr := []byte(`
{
"background_image": "",
"aspect": { "width": 4224, "height": 3264 },
"dimension": { "width": 1187, "height": 848 },
"photos": [
{
"image": "img1.jpg",
"crop": {
"start": { "x": 419, "y": 667 },
"end": { "x": 2707, "y": 3389 }
},
"frame": {
"start": { "x": 0, "y": 0 },
"end": { "x": 712, "y": 848 }
}
},
{
"image": "img2.jpg",
"crop": {
"start": { "x": 331, "y": 44 },
"end": { "x": 1132, "y": 1468 }
},
"frame": {
"start": { "x": 712, "y": 0 },
"end": { "x": 1187, "y": 848 }
}
}
]
}
`)
*/
// {"background_image":"","aspect":{"width":4224,"height":3264},"dimension":{"width":1187,"height":848},"photos":[{"image":"img1.jpg","crop":{"start":{"x":528,"y":3},"end":{"x":2696,"y":2583}},"frame":{"start":{"x":0,"y":0},"end":{"x":712,"y":848}}},{"image":"img2.jpg","crop":{"start":{"x":410,"y":0},"end":{"x":1014,"y":1074}},"frame":{"start":{"x":712,"y":0},"end":{"x":1187,"y":848}}}]}
reqStr := []byte(`
{"background_image":"","aspect":{"width":4224,"height":3264},"dimension":{"width":1097,"height":848},"photos":[{"image":"img1.jpg","crop":{"start":{"x":448,"y":595},"end":{"x":2721,"y":3560}},"frame":{"start":{"x":0,"y":0},"end":{"x":649,"y":848}}},{"image":"img2.jpg","crop":{"start":{"x":418,"y":1},"end":{"x":1022,"y":1180}},"frame":{"start":{"x":665,"y":0},"end":{"x":1098,"y":848}}}]}
`)
err := json.Unmarshal(reqStr, &req)
fmt.Println(err)
out, err := os.Create("./collage.jpg")
fmt.Println(err)
err = collage.Make(req, os.DirFS("."), out)
fmt.Println(err)
}

3
collage/collage.go
View File

@ -4,6 +4,7 @@ package collage
import ( import (
"errors" "errors"
"image" "image"
"image/color"
"image/draw" "image/draw"
"image/jpeg" "image/jpeg"
"io" "io"
@ -50,6 +51,8 @@ type Request struct {
func Make(req Request, source fs.FS, output io.Writer) error { func Make(req Request, source fs.FS, output io.Writer) error {
rec := image.Rect(0, 0, int(req.Aspect.Width), int(req.Aspect.Height)) rec := image.Rect(0, 0, int(req.Aspect.Width), int(req.Aspect.Height))
canvas := image.NewRGBA64(rec) canvas := image.NewRGBA64(rec)
white := color.RGBA{255, 255, 255, 255}
draw.Draw(canvas, rec, &image.Uniform{white}, image.Point{}, draw.Src)
for _, photo := range req.Photos { for _, photo := range req.Photos {
img, err := GetImage(source, photo.ImageName) img, err := GetImage(source, photo.ImageName)
if err != nil { if err != nil {

1
dummy.txt Normal file
View File

@ -0,0 +1 @@
hello world

7
index.html
View File

@ -54,8 +54,9 @@
// width: 80vh; // width: 80vh;
height: 100%; height: 100%;
// margin: auto; // margin: auto;
// aspect-ratio: 110 / 85; aspect-ratio: 110 / 85;
aspect-ratio: 7 / 5; // aspect-ratio: 7 / 5;
gap: 1rem;
} }
.letter-landscape-2 .img1 { .letter-landscape-2 .img1 {
flex: 60%; flex: 60%;
@ -68,7 +69,7 @@
<body onload="main()"> <body onload="main()">
<div class="container"> <div class="container">
<div class="controls"> <div class="controls">
<button class="showbuton" onClick="showCrop()">Snap Collage</button> <button class="showbuton" onClick="snap()">Snap Collage</button>
</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">

85
index.js
View File

@ -1,5 +1,7 @@
var crops = []; function main() {
initCollage("collage")
}
function makeCroppieElem(elem, imgUrl) { function makeCroppieElem(elem, imgUrl) {
cpie = new Croppie(elem, { cpie = new Croppie(elem, {
@ -15,20 +17,25 @@ function makeCroppieElem(elem, imgUrl) {
url: imgUrl url: imgUrl
}); });
crops.push(cpie) return cpie
} }
function makeCroppie(collageDivId) { // collage state
var collageDivId;
var crops = [];
function initCollage(divId) {
collageDivId = divId
const collageDiv = document.getElementById(collageDivId) const collageDiv = document.getElementById(collageDivId)
for(elem of collageDiv.getElementsByClassName("collage-img")) { for(elem of collageDiv.getElementsByClassName("collage-img")) {
makeCroppieElem(elem, elem.dataset.collageImageUrl) const cpie = makeCroppieElem(elem, elem.dataset.collageImageUrl)
const lastLen = crops.push(cpie)
elem.dataset.collageCropieIndex = lastLen - 1
} }
} }
function main() {
makeCroppie("collage")
}
function showCrop() { function showCrop() {
for(cpie of crops) { for(cpie of crops) {
console.log(cpie.get()) console.log(cpie.get())
@ -36,3 +43,65 @@ function showCrop() {
console.log(cpie.element.clientHeight) 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()
}