ImageMagickを使ってカラーコードからPNG/GIF/JPEG画像を生成する
ImageMagickのインストール (Mac)
$ brew info imagemagick imagemagick: stable 6.9.1-1 (bottled), HEAD http://www.imagemagick.org
$ brew install imagemagick
バイナリ版
画像生成の基礎
$ convert -size 100x100 xc:#FF0000 red.png
※ 出力ファイル名の拡張子を .jpg
にすると JPEG、.gif
にすると GIF になる。他もできるかも
- Canvas Creation -- IM v6 Examples
公式によるたくさんのコマンドサンプル - Imagemagick how to call colours
色の指定記法いろいろ
たくさんのカラーコードから一括生成する
マテリアルデザインのカラーコードをサンプルに。
いつぞや作ったブックマークレットの jquerify を使って jQuery を読み込み、 Chrome Dev Tools を使ってカラーコードだけ抽出します。
$('.color-group .hex').each(function(){ console.log(this.innerText); })
これを使って Ruby で画像生成コマンドを叩いた例
file = File.open('materialcolors.txt') file.each_line do |hex| hex.gsub! "\n", "" cmd = "convert -size 15x15 xc:##{hex} result/#{hex}.png" system(cmd) end
ヮ(゚д゚)ォ!