文字画像ジェネレータを作った

アイコン作成のために文字画像を作りたくなったのですが、お手軽に作れるサービス/アプリがなかったので作りました。 画像編集ソフトで地道に作ろうとすると、領域を指定してそのサイズ内にきちんとフォントが綺麗に収まってるか確認して、 ◯や□で囲んだ上でジャギーを判断して、32x32に収まるように調整…など地味につらい作業なのです。

作り方: 以下のテキストエリアでJavaScript/CSSを書くとリアルタイムに編集結果がプレビューできます。 良い感じの文字画像が完成したら画像化しましょう。

B!

var text = document.getElementById('text'); text.innerText = 'B!'; text.style.fontSize = '24px'; var area = document.getElementById('area'); area.style.width = '28px'; area.style.height = '28px'; area.style.border = '2px solid black'; area.style.borderRadius = '10px'; // 中央表示 area.style.display = 'flex'; area.style.justifyContent = 'center'; area.style.alignItems = 'center'; area.style.textAlign = 'center';

注意点: 画像化にはhtml2canvasを使っているのですが、色々とサポートしていないCSSプロパティがあって、できない事があります。 また非対応の属性を使わなくても、いざ画像生成してみるとズレが発生しがちなのが現状です。 Linuxだとすぐズレるみたいだけど、Windowsは大丈夫っぽい。フォントの問題なのかなあ。 特に複雑な事はしてないのでライブラリのバグとは思うのですが…。

html2canvasはもうすぐ ver1.0.0 がリリースされるそうなので、表示が崩れなくなったらこの小さなアプリも更新します。 Linuxで画像化がうまくいかない不満は残りますが、Windowsで作れば何とかなるので、現状では良しとしておきます。