UnitaryJSで動的にファビコンをつくる

謹賀新年、あけましておめでとうございます。今年最初の記事は「動的にファビコンをつくる」という内容でお送りいたします。

デモ

まず動くサンプルが見たい人むけにデモを用意しました。

試してみたい方はこちらからどうぞ。

上のデモでは、このような数字がくっついたファビコンを作りました。

準備

まず準備としてUnitaryJSをインストールしてください。

1. npm i --save unitaryjs
2. node_modules/unitaryjs/dist/unitary.min.js と node_modules/unitaryjs/dist/canvas.min.jsを読み込む

やり方

以下のプログラムをcanvas.min.jsより後に読み込んでください。

canvasFavicon.js:

あとはCanvasを使って好きなように描画して、.setAsFavicon()を呼び出すだけです。

main.js:

const canvas = new Canvas('mainCanvas');
canvas.mode = 'normal';
const faviconImage = new Unitary.Image('favicon.png', new Unitary.Point(0, 0)).trim(new Unitary.Point(0, 0), 128, 128, 32, 32);
const faviconText = new Unitary.Text('94', new Unitary.Point(9, 30))
    .setFont('18px bold')
    .setFillColor('#fff');
const faviconTextBackground = new Unitary.Rect(new Unitary.Point(8, 15), new Unitary.Point(11 + 21, 20 + 12)).setFillColor('#f00');


canvas.add(faviconImage);
canvas.add(faviconTextBackground);
canvas.add(faviconText);

canvas.setAsFavicon();

まとめ

Canvasで描画したものをファビコンにできるので、表現力はかなり高いです。どうぞ使ってみてください。