faviconに通知数を表示させるやつをjsでやる

![スクリーンショット 2016-02-17 22.55.42.png](https://qiita-image-store.s3.amazonaws.com/0/22392/3fd22168-e198-1493-c62c-3c01f1fc0146.png "スクリーンショット 2016-02-17 22.55.42.png")
チャットワークなんかでよくある通知されると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);
}
```
![スクリーンショット 2016-02-17 23.27.58.png](https://qiita-image-store.s3.amazonaws.com/0/22392/a3fe5f4c-95ff-9a06-0600-4cbfe22256d8.png "スクリーンショット 2016-02-17 23.27.58.png")
こうなる
##描画したものをpngにする
```js
var faviconImage = canvas.toDataURL('image/png');
```

とするとcanvasの像が　[base64形式](https://ja.wikipedia.org/wiki/Base64)でpngファイルのURIとして得られる。
ちなみに、Webサーバを介さない場合はクロスドメイン制約に引っかかるので

```js
baseFaviconImg.crossOrigin = 'Anonymous';
```
と設定するか、素直にwebサーバ立てると良い。(上記、Firefoxでは出来たが、Chromeではダメだった。)

```:得られたURI
data:image/png;base64,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
```
![スクリーンショット 2016-02-17 23.51.37.png](https://qiita-image-store.s3.amazonaws.com/0/22392/abd091a6-a2be-5a6e-375a-e975c1c34951.png "スクリーンショット 2016-02-17 23.51.37.png")
##生成された物をfaviconに設定
後はいつもどおりhrefを書き換えるだけ。

```favicon書き換え.js
document.getElementById('favicon').href=faviconImage
```

（潰れてるけど...）出来た！！！
![スクリーンショット 2016-02-17 23.55.28.png](https://qiita-image-store.s3.amazonaws.com/0/22392/0b9cee76-41ab-9c31-af86-eda00c67e042.png "スクリーンショット 2016-02-17 23.55.28.png")

今回は解説のためにcanvasが表示されるようにしたけれど、

```js
var canvas = document.createElement('canvas');
canvas.width = 32, canvas.height = 32;
```

と定義する事で非表示のまま扱うことが出来る。