チャットワークなんかでよくある通知されるとfaviconにも数字がつくやつ。
王道実装はデフォルトfaviconとは別に通知用のfaviconファイルを前もって用意しておいて切り替えする方法なんだろうけど、別の方法も思いついたのでやってみる。
##Canvasを使ってfavicon画像の上に通知バッジを描く
描画用のcanvasを用意する.html
<body>
<canvas id="canvas" width="32" height="32"></canvas>
</body>
canvasにfaviconと通知バッジ(99)を描画する.js
var baseFaviconImg = new Image();
baseFaviconImg.src = "favicon2.png";
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(baseFaviconImg, 0, 0);
ctx.fillStyle = "#f00";
ctx.fillRect(11,20, 18,12);
ctx.font = "bold 10px 'ヒラギノ角ゴ ProN W3'";
ctx.fillStyle = "#fff";
ctx.fillText("99", 13, 30);
}
var faviconImage = canvas.toDataURL('image/png');
とするとcanvasの像が base64形式でpngファイルのURIとして得られる。
ちなみに、Webサーバを介さない場合はクロスドメイン制約に引っかかるので
baseFaviconImg.crossOrigin = 'Anonymous';
と設定するか、素直にwebサーバ立てると良い。(上記、Firefoxでは出来たが、Chromeではダメだった。)
得られたURI
data:image/png;base64,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
##生成された物をfaviconに設定
後はいつもどおりhrefを書き換えるだけ。
favicon書き換え.js
document.getElementById('favicon').href=faviconImage
今回は解説のためにcanvasが表示されるようにしたけれど、
var canvas = document.createElement('canvas');
canvas.width = 32, canvas.height = 32;
と定義する事で非表示のまま扱うことが出来る。