Help us understand the problem. What is going on with this article?

ImageMagickで全ての画像と同じサイズの単色画像を生成するシェルスクリプト

More than 1 year has passed since last update.

ImageMagicで、作業ディレクトリ内にある全ての画像と同じサイズの単色画像を生成するシェルスクリプトです。

必要なツール

  • ImageMagick

ソースコード

このコードでは、JPGのみを対象画像に設定しています。(PNG、SVGでも動作確認済み)

create_gray_img.sh
#!/bin/sh

dir_name="gray_img"

# mkdir except exist
if [ ! -e $dir_name ]; then
    mkdir $dir_name
fi

for file in *; do
    # filter JPG only
    if [ ${file##*.} = "jpg" ]; then    

        # convert params
        size=`identify -format %wx%h ${file}`
        color="gray"
        slash="/"
        output_f_path=$dir_name$slash$file

        echo "Processing: ${file}"

        convert -size $size xc:$color $output_f_path
    fi
done

実行例

実行コマンド

$ bash create_gray_img.sh

Processing: onigiri.jpg

実行結果

なんで書いたの?

lazyloadで、ブラウザがオリジナルの画像をloadする前にpreloadさせておくダミー画像を作るために書きました。

preloadさせておかないと、ページ内リンクによるスクロールイベントで、画像サイズ分のズレが発生してしまいます。
もちろん、他にも回避方法はあります(一例)が、表示する画像サイズが一定でない場合はこの方法が有効です。

ただ、preloadする画像の数だけRequestが増えるので、最善策ではない気がしてます。
やっぱり事前に画像サイズのパターン決めてcssで制御するのが良いのかな...?

他に良い方法を知ってる方がいたら教えてください🙏

Hirosaji
ゲーム実況を観ながらプログラミングをするのが好きなWebエンジニアです。
https://bl.ocks.org/hirosaji
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away