 |
potatothumb: iteration improvements - jscancer - Javascript crap (relatively sm… |
 |
git clone git://git.codemadness.org/jscancer |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
commit 57de4ff819f5ba51cd3973929c0f638817a874bf |
|
parent 7bea62eba4e15fb77ab92ab7094b624583d4ece8 |
|
Author: Hiltjo Posthuma <[email protected]> |
|
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(-) |
|
--- |
|
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 |
|
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" histogra… |
|
-sort -t ':' -r -n | \ |
|
-LC_ALL=C awk -F ' ' '{ print $3; exit }') |
|
+ # get primary color, sortof... |
|
+ bgcolor=$(convert -blur 16x16 -scale 16x16! -dither FloydSteinberg -de… |
|
+ 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('dat… |
|
+ echo "<img src=\"$1_broken\" width=\"$w\" height=\"$h\" alt=\"\" loadi… |
|
+ 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:ima… |
|
-echo "<img src=\"$1\" alt=\"\" decoding=\"async\" loading=\"lazy\" width=\"$w\… |
|
-echo "</div>" |
|
+for f in "$@"; do |
|
+ image2html "$f" |
|
+done |
