potatothumb: iteration improvements - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 57de4ff819f5ba51cd3973929c0f638817a874bf
(DIR) parent 7bea62eba4e15fb77ab92ab7094b624583d4ece8
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Fri, 24 Mar 2023 12:14:32 +0100
potatothumb: iteration improvements
Diffstat:
M potatothumb/README | 27 ++++++++++++++++++++-------
M potatothumb/potato.sh | 47 +++++++++++++++++++------------
2 files changed, 49 insertions(+), 25 deletions(-)
---
(DIR) diff --git a/potatothumb/README b/potatothumb/README
@@ -1,18 +1,31 @@
-Create a tiny potato quality thumbnail placeholder that is similar in color as
-the source image.
+potatothumb
+===========
+Creates a tiny potato quality thumbnail placeholder that is similar in color as
+the source image. Also generate a primary base color of the image as fallback
+when webp is unsupported or disabled.
-Inspired by:
- https://evanw.github.io/thumbhash/
- https://github.com/woltapp/blurhash
+Dependencies
+------------
-Dependencies:
+- Imagemagick
+- base64
+- POSIX sh, awk, sort, etc.
- Imagemagick
+
+Caveats/broken web stuff
+------------------------
Note that in modern Firefox versions the background is white while loading.
This used to be transparent. In other browsers such as Webkit-based browsers
this is not the case and it looks better:
https://bugzilla.mozilla.org/show_bug.cgi?id=1556156
+
+
+Inspired by
+-----------
+
+- https://evanw.github.io/thumbhash/
+- https://github.com/woltapp/blurhash
(DIR) diff --git a/potatothumb/potato.sh b/potatothumb/potato.sh
@@ -1,24 +1,35 @@
#!/bin/sh
-if test "$1" = ""; then
- echo "usage: $0 <image>" >&2
- exit 1
-fi
+image2html() {
+ w=$(identify -ping -format '%w' "$1" 2>/dev/null)
+ h=$(identify -ping -format '%h' "$1" 2>/dev/null)
+
+ if test "$w" = "" -o "$h" = ""; then
+ echo "no image dimensions found for: $1" >&2
+ return
+ fi
-# get primary color, sortof
-bgcolor=$(convert -scale 16x16! -depth 8 -colors 16 "$1" -format "%c" histogram:info: | \
-sort -t ':' -r -n | \
-LC_ALL=C awk -F ' ' '{ print $3; exit }')
+ # get primary color, sortof...
+ bgcolor=$(convert -blur 16x16 -scale 16x16! -dither FloydSteinberg -depth 8 -colors 16 "$1" -format "%c" histogram:info: | \
+ sort -t ':' -r -n | \
+ LC_ALL=C awk -F ' ' '{ print $3; exit }')
-data=$(convert -resize 16x16 -quality 50 -strip "$1" \
- -define webp:filter-strength=50 \
- -define webp:lossless=false \
- -define webp:target-size=100 \
- "webp:-" | base64 | tr -d '\n')
+ data=$(convert -scale 16x16! -quality 50 -strip "$1" \
+ -define webp:filter-strength=50 \
+ -define webp:lossless=false \
+ -define webp:target-size=100 \
+ "webp:-" | base64 | tr -d '\n')
-w=$(identify -ping -format '%w' "$1")
-h=$(identify -ping -format '%h' "$1")
+ echo "<div style=\"display:inline-block;background:${bgcolor} url('data:image/webp;base64,${data}') no-repeat;background-size:cover\">"
+ echo "<img src=\"$1_broken\" width=\"$w\" height=\"$h\" alt=\"\" loading=\"lazy\" decoding=\"async\" />"
+ echo "</div>"
+}
+
+if test "$#" -lt 1; then
+ echo "usage: $0 <image> ..." >&2
+ exit 1
+fi
-echo "<div style=\"display: inline-block; background: ${bgcolor} url('data:image/webp;base64,${data}') no-repeat; background-size: cover\">"
-echo "<img src=\"$1\" alt=\"\" decoding=\"async\" loading=\"lazy\" width=\"$w\" height=\"$h\" />"
-echo "</div>"
+for f in "$@"; do
+ image2html "$f"
+done