hostr-image-upload usage: ⎗ ✓ 1./hostr-image-upload.sh image.png image.html uploader: ⎗ ✓ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59t=$(cat <<EOF <html> <head> <meta property="og:type" content="image" /> <meta property="og:title" content="{IMAGE_TITLE}" /> <meta property="og:site_name" content="hostr" /> <meta property="og:description" content="image description" /> <meta property="og:image" content="data:image/webp;base64,{IMAGE_DATA}"/> <meta property="og:image:width" content="2160" /> <meta property="og:image:height" content="1080" /> <style> body { margin: 0; text-align: center; background: black; } img { width: {IMAGE_WIDTH}px; height: {IMAGE_HEIGHT}px; } img { object-fit: cover; } div:not(.active) img { max-width: 100vw; max-height: 100vh; } </style> </head> <body> <div></div> <script> img = document.createElement("img") img.src = document.querySelector('meta[property="og:image"]').content document.querySelector("div").append(img) img.onclick = function(){ this.parentElement.classList.toggle("active") } </script> </body> </html> EOF ) convert $1 -background black -resize 2160x1080 -compose Copy -gravity center -extent 2160x1080 -quality 57 image.webp image=$(cat image.webp | base64 -w 0) title=$(basename $1) width=$(identify -format "%[fx:w]" $1) height=$(identify -format "%[fx:h]" $1) nheight=1080 nwidth=$(echo "scale=1; $width / $height * $nheight" | bc | grep -oP "^\d+") t=${t/"{IMAGE_DATA}"/$image} t=${t/"{IMAGE_TITLE}"/$title} t=${t//"{IMAGE_WIDTH}"/$nwidth} t=${t//"{IMAGE_HEIGHT}"/$nheight} mkdir -p $PWD/tmp echo -e "$t" > $PWD/tmp/index.html hostr deploy -d $2 -p $PWD/tmp/
Warning LINK You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue? Continue Cancel