JavaScriptで数値や文字列を画像に置き換える

アクセスカウンターやデジタル時計など数値を画像で表示したいとき。

var str = String(123);// 一度文字列へ
for (var i in str)
{
    document.write('<img src="' + str[i] + '.png">');// i番目の文字
}

画像を用意すれば数値だけじゃなくて文字列も置換可能。
適当なベンチマークではstr.charAt(i)よりstr[i]の方が30倍くらい高速だった。

関数にするならこんな感じ?

// 関数定義
function str2img(str, img)
{
    var imgs = '';
    for (var i in str)
    {
        imgs += img.replace('%s', str[i]);
    }
    return imgs;
}
 
// 使用例
document.write(str2img('abc123', '<img src="http://sample.com/%s.png">'));

JavaScriptにはsprintf関数がないので%sを固定で置換。詳しくはここらへん
画像作ってないから実際に表示されるかは分からないけど日本語も出力はされるみたい。


カテゴリー: JavaScript タグ: パーマリンク