From af92e8436f4077d94860c3cdd4d536c8a20af8f3 Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Sun, 11 Apr 2021 14:55:22 +0100
Subject: [PATCH] Make cropping optional via query string

---
 index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++------
 main.go    | 18 +++++++++++++++---
 2 files changed, 65 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 6777d79..25b6dfb 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,13 @@
   <head>
     <title>Photos</title>
     <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+      }
       .image {
         position: absolute;
         top: 0;
@@ -10,25 +17,57 @@
         height: 100vh;
         width: 100vw;
         display: block;
-        background-size: cover;
-        background-repeat: no-repeat;
         opacity: 0;
+        text-align: center;
         -webkit-transition: opacity 3s ease-in-out;
         -moz-transition: opacity 3s ease-in-out;
         -o-transition: opacity 3s ease-in-out;
         transition: opacity 3s ease-in-out;
       }
 
+      .image .bg {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+        z-index: -1;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        filter: blur(30px);
+        -webkit-filter: blur(30px);
+        -moz-filter: blur(30px);
+        -o-filter: blur(30px);
+        -ms-filter: blur(30px);
+      }
+
       .image.active {
         opacity: 1;
       }
+
+      .image img {
+        max-height: 100vh;
+        max-width: 100vw;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+      }
     </style>
   </head>
   <body>
-    <div class="image active"></div>
-    <div class="image"></div>
+    <div class="image active">
+      <div class="bg"></div>
+      <img />
+    </div>
+    <div class="image">
+      <div class="bg"></div>
+      <img />
+    </div>
 
     <script type="text/javascript">
+    let crop = window.location.search.includes("crop");
     function process() {
       const width = document.documentElement.clientWidth;
       const height = document.documentElement.clientHeight;
@@ -37,9 +76,14 @@
       let nextElement = document.querySelector('.image:not(.active)');
 
       let im = new Image();
-      im.src = `/image/?width=${width}&height=${height}&ts=${timestamp}`;
+      im.src = `/image/?width=${width}&height=${height}&ts=${timestamp}&crop=${crop ? 'true' : 'false'}`;
+      if (crop) {
+        im.style.width = "100vw";
+        im.style.height = "100vh";
+      }
       im.onload = function() {
-        nextElement.style.backgroundImage = `url('${im.src}')`;
+        nextElement.querySelector('.bg').style.backgroundImage = `url('${im.src}')`;
+        nextElement.replaceChild(im, nextElement.querySelector('img'));
         [...document.querySelectorAll('.image')].forEach(el => el.classList.toggle('active'));
         setTimeout(process, 5000);
       };
diff --git a/main.go b/main.go
index 4108d4a..9ce8df0 100644
--- a/main.go
+++ b/main.go
@@ -10,6 +10,7 @@ import (
 	"os"
 	"path/filepath"
 	"strconv"
+	"strings"
 
 	"github.com/artyom/smartcrop"
 	"github.com/edwvee/exiffix"
@@ -32,11 +33,17 @@ func main() {
 	})
 
 	app.Get("/image", func(c *fiber.Ctx) error {
-		photos, _ := filepath.Glob(filepath.Join(imageDirectory, "*.jpg"))
+		photos, _ := filepath.Glob(filepath.Join(imageDirectory, "*.[jJ][pP][gG]"))
+		photo := photos[rand.Intn(len(photos))]
 		width, _ := strconv.Atoi(c.Query("width", "1280"))
 		height, _ := strconv.Atoi(c.Query("height", "800"))
 
-		img := cropImage(photos[rand.Intn(len(photos))], width, height)
+		var img image.Image
+		if strings.ToLower(c.Query("crop")) == "true" {
+			img = cropImage(photo, width, height)
+		} else {
+			img = loadImage(photo)
+		}
 
 		buf := new(bytes.Buffer)
 		jpeg.Encode(buf, img, &jpeg.Options{Quality: 100})
@@ -48,7 +55,7 @@ func main() {
 	app.Listen(":3000")
 }
 
-func cropImage(imgSrc string, width, height int) image.Image {
+func loadImage(imgSrc string) image.Image {
 	f, err := os.Open(imgSrc)
 	if err != nil {
 		log.Fatal(err)
@@ -59,6 +66,11 @@ func cropImage(imgSrc string, width, height int) image.Image {
 	if err != nil {
 		log.Fatal(err)
 	}
+	return img
+}
+
+func cropImage(imgSrc string, width, height int) image.Image {
+	img := loadImage(imgSrc)
 
 	topCrop, err := smartcrop.Crop(img, width, height)
 	if err != nil {
