テキスト画像はHTMLで作ろう！

こんちには。
ずいぶん前からmacユーザーなんですが
未だに「窓の杜」は欠かさずチェックしています。

んで、窓の杜を含めいろんなサイトで使われてるのが
テキスト画像です。(私が勝手に付けた名前です。一般的ではないと思う。)

スクショ

こうゆうやつ。
見た目はテキストだけど
実際は画像なやつ。

これは長所もあるんですがもちろん短所もありまして。。

そのひとつが
項目を追加したり、テキストを修正したりするときに
いちいち画像を作らないといけないこと。

チョコっと修正するだけでも画像作成の担当が外部のデザイナだったりしたら毎回デザイン発注することになる。。

コレくらいのことでデザイン費を払うの？

ヤダ。
ってか発注される側も手続きが面倒なだけだからイヤだと思う。
なら自分で作ろうってことになるですが
フォトショ持ってない。。

ヤダ。毎月何千円も払うのは割に合わない。。

ってことで本題

CSS3になって
表現が自由になったので
それをスクショしちゃえばよくね？って発想です。

それをかなえてくれるのがhtml2canvas.js！
その名のとおりhtmlをcanvas化してくれます。
canvas化できるってことは画像化もできます。
もちろんalphaチャンネルも効きます。
これを使わない手はない！

てことでサンプル作りました。
せっかくなのでGoogleFontsから
PCには入ってないようなフォントをピックアップしてみた。出来上がったのはこちら

これで生成した画像がこちら。

いい感じ！
作り方次第ではretina画像とかいろんなDPIの画像が生成できます。
これで無駄な費用を使わずに
いろんな画像が作れる！
お試しあれ。