From cd7c27460fb5c8e3d2159145e818d10dd8c9d8dc Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Sun, 27 Aug 2023 22:22:17 -0400 Subject: [PATCH] college is generated --- cmd/run.go | 56 ++++++++++++++++++++++++++++++ collage/collage.go | 3 ++ dummy.txt | 1 + index.html | 7 ++-- index.js | 85 +++++++++++++++++++++++++++++++++++++++++----- 5 files changed, 141 insertions(+), 11 deletions(-) create mode 100644 cmd/run.go create mode 100644 dummy.txt diff --git a/cmd/run.go b/cmd/run.go new file mode 100644 index 0000000..a805eb7 --- /dev/null +++ b/cmd/run.go @@ -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) +} diff --git a/collage/collage.go b/collage/collage.go index 832e17b..5197790 100644 --- a/collage/collage.go +++ b/collage/collage.go @@ -4,6 +4,7 @@ package collage import ( "errors" "image" + "image/color" "image/draw" "image/jpeg" "io" @@ -50,6 +51,8 @@ type Request struct { func Make(req Request, source fs.FS, output io.Writer) error { rec := image.Rect(0, 0, int(req.Aspect.Width), int(req.Aspect.Height)) 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 { img, err := GetImage(source, photo.ImageName) if err != nil { diff --git a/dummy.txt b/dummy.txt new file mode 100644 index 0000000..3b18e51 --- /dev/null +++ b/dummy.txt @@ -0,0 +1 @@ +hello world diff --git a/index.html b/index.html index f3abb72..c601b02 100644 --- a/index.html +++ b/index.html @@ -54,8 +54,9 @@ // width: 80vh; height: 100%; // margin: auto; - // aspect-ratio: 110 / 85; - aspect-ratio: 7 / 5; + aspect-ratio: 110 / 85; + // aspect-ratio: 7 / 5; + gap: 1rem; } .letter-landscape-2 .img1 { flex: 60%; @@ -68,7 +69,7 @@
- +
diff --git a/index.js b/index.js index 15b9c5c..c0be8e6 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,7 @@ -var crops = []; +function main() { + initCollage("collage") +} function makeCroppieElem(elem, imgUrl) { cpie = new Croppie(elem, { @@ -15,20 +17,25 @@ function makeCroppieElem(elem, 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) 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() { for(cpie of crops) { console.log(cpie.get()) @@ -36,3 +43,65 @@ function showCrop() { 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() +}