add potatothumb - 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 7bea62eba4e15fb77ab92ab7094b624583d4ece8
 (DIR) parent 70528b22dba5557afeb49d379101a971be21f86c
 (HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
       Date:   Thu, 23 Mar 2023 20:11:35 +0100
       
       add potatothumb
       
       Diffstat:
         A potatothumb/README                  |      18 ++++++++++++++++++
         A potatothumb/potato.sh               |      24 ++++++++++++++++++++++++
       
       2 files changed, 42 insertions(+), 0 deletions(-)
       ---
 (DIR) diff --git a/potatothumb/README b/potatothumb/README
       @@ -0,0 +1,18 @@
       +Create a tiny potato quality thumbnail placeholder that is similar in color as
       +the source image.
       +
       +
       +Inspired by:
       +        https://evanw.github.io/thumbhash/
       +        https://github.com/woltapp/blurhash
       +
       +
       +Dependencies:
       +
       +        Imagemagick
       +
       +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
 (DIR) diff --git a/potatothumb/potato.sh b/potatothumb/potato.sh
       @@ -0,0 +1,24 @@
       +#!/bin/sh
       +
       +if test "$1" = ""; then
       +        echo "usage: $0 <image>" >&2
       +        exit 1
       +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 }')
       +
       +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')
       +
       +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\" alt=\"\" decoding=\"async\" loading=\"lazy\" width=\"$w\" height=\"$h\" />"
       +echo "</div>"