text2pngを使ってみた - うなの日記

text2pngはHTML内の任意のテキストをPNG画像に変換するWebサービスです。

専用のJavaScriptクライアントライブラリのAPIを実行することで、HTML内の要素がPNG画像に置き換わります。
テキストのフォントやサイズは、CSSの値が継承されます。また、APIの引数で指定することも可能です。

サンプル。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <!-- 依存モジュールの読み込み -->
  <script type="text/javascript" language="javascript" src="http://www.text2png.com/text_script.js"></script>
  <script type="text/javascript" language="javascript">
      
    // ここに、変換コードを書く。
	text2png.onLoad = function(){

        // 指定の要素を画像に変換。
        text2png.replace('to-png-1');

        // CSSから継承することも可能。
        text2png.replace('to-png-2');

        // オプションで指定/ボールドにする。
        text2png.replace('to-png-3', {bold:1});

    };
  </script>
  <style>
    div#to-png-2 {
        color: #339933;
        font-size: 32px;
        font-weight: bold;
        font-family: 'Ms Mincho';
    }
  </style>
</head>
<body>
    <div id="to-png-1">text2png</div>
    <div id="to-png-2">CSSの値を使う</div>
    <div id="to-png-3">Bold</div>
</body>
</html>