【ImageMagick】文字を画像にする

イメージマジックはWindowsだとあまり使うことのないソフトですがlinuxなら確実に使う機会のあるソフトです。

脆弱性が多くあるので外部とのやり取りはさせたくないですが、コマンドから容易に使えるためちょっとした画像処理ボットなんかに使いやすいです。

convertコマンドを使うのでオプション部分のみ記載します。

文字を描画して保存する

label:aあ1 ./test1.jpg

デフォルトのフォントが日本語対応していないため文字化けする。

フォントサイズを変更する

-pointsize 30 label:aあ1 ./test2.jpg

フォントサイズを変えると、それに応じて画像も大きくなります。

フォントを指定する

-font ../fonts/VL-Gothic-Regular.ttf -pointsize 30 label:aあ1 ./test3.jpg

VLゴシックを指定して、日本語も表示されるようになった。(以後は名前省略)

別の画像に文字を入れる

-font x.ttf -pointsize 30 -annotate +20+30 aあ1 ./dot.jpg ./test4.jpg

-font x.ttf -pointsize 30 -annotate +40+60 aあ1 ./dot.jpg ./test5.jpg

annotateで文字を入れる場所を指定します。

画像に文字を入れる場合はlabel:が不要です。

文字、背景色を変える

-fill red -background rgb(0,200,100) -font x.ttf -pointsize 30 label:aあ1 ./test6.jpg

-fill #FFFF00 -background rgba(0,0,0,0) -font x.ttf -pointsize 30 label:aあ1 ./test6.png

色指定は名前(red,transparent)、rgb、rgba、カラーコードが使えます。

出力画像のサイズを指定する

-size 200x100 -background gray -font x.ttf -pointsize 30 label:aあ1 ./test7.jpg

-size 200x100 -fill red -background rgb(0,200,100) -gravity Center -font x.ttf -pointsize 30 label:aあ1 ./test8.jpg

gravityはnorth,south,east,westとその間(northeastなど)、中央(center)の9か所。

サイズを指定する場合は自動でサイズを変えないので計算する必要があります。

応用：複数書体の文書を１つの画像にする

1つのコマンドではできないので複数コマンドが必要になる。

今回はnode.jsを使って実装してみる。(windows環境で行う)

Narumium Blog

Windows10環境でNode.jsを使って画像処理を行う

Node.jsでBOTを作る途中で簡単な画像処理をしてみたくなったので、それらしい方法を探してみました。まずはnpmでインストールできるパッケージを探して、 html5...

※今回はidentifyも使うためconvert同様にmagickを複製してidentifyに変更する。

まずは個々の設定での画像を作成する。

const makeImg = function(cmd){
  return new Promise((resolve, reject) => {
    im.convert(cmd, function(err, stdout){
      im.identify(["-format","%wx%h",cmd[cmd.length-1]], function(err,out){
        let o = output.split("x");
        resolve([cmd[cmd.length-1],parseInt(o[0]),parseInt(o[1])]);
      });
    });
  });
}

const makeImg = function(cmd){

return new Promise((resolve, reject) => {

im.convert(cmd, function(err, stdout){

im.identify(["-format","%wx%h",cmd[cmd.length-1]], function(err,out){

let o = output.split("x");

resolve([cmd[cmd.length-1],parseInt(o[0]),parseInt(o[1])]);

});

}

画像作成後に名前と画像サイズを返す関数。

複数の非同期処理に対応するためプロミス処理でラップした。

あとはmontageを使えば1つの画像にできそうだけど、この環境ではできないのでconvertを使って重ね合わせる。

Promise.all(ps).then((vs)=>{
  //単純に下につなげていく場合
  let cmd = ["-append"].concat(vs.map(v => v[0]));
  cmd.push("out.jpg");
  im.convert(cmd);

  //見栄えを気にして色々する場合
  let maxW = Math.max(...vs.map(v => v[1]));
  let maxH = Math.max(...vs.map(v => v[2]));
  vs.forEach((v)=>{
    //個別処理など
  });
});

Promise.all(ps).then((vs)=>{

//単純に下につなげていく場合

let cmd = ["-append"].concat(vs.map(v => v[0]));

cmd.push("out.jpg");

im.convert(cmd);

//見栄えを気にして色々する場合

let maxW = Math.max(...vs.map(v => v[1]));

let maxH = Math.max(...vs.map(v => v[2]));

vs.forEach((v)=>{

//個別処理など

});

これで、こんな感じの複数文字設定画像を作ることができる。

変に複雑化した感じもするが、ちゃんと設定してコマンド一つで呼び出せるように整備すれば色々と使いどころがあるかもしれない。